Theme switcher

packages/repl/src/App.tsx

@@ -33,12 +33,13 @@ export function App() {
           class="invisible size-0"
           src={import.meta.env.VITE_IFRAME_URL}
         />
-        <nav class="relative flex h-auto w-full shrink-0 flex-row items-center overflow-hidden px-4 py-2">
+        <nav class="relative flex h-auto w-full shrink-0 flex-row items-center justify-between overflow-hidden px-4 py-2">
           <h1 class="font-mono text-base">
             @mtcute/
             <b>playground</b>
           </h1>
 
+          <div class="flex items-center gap-1">
             <NavbarMenu
               onShowAccounts={() => {
                 setShowSettings(true)
@@ -48,6 +49,7 @@ export function App() {
                 setShowSettings(true)
               }}
             />
+          </div>
         </nav>
         <div class="h-px shrink-0 bg-border" />
         <Show

packages/repl/src/components/nav/NavbarMenu.tsx

@@ -1,7 +1,9 @@
+import type { ConfigColorMode, MaybeConfigColorMode } from '@kobalte/core'
 import type { DropdownMenuTriggerProps } from '@kobalte/core/dropdown-menu'
-import { LucideCheck, LucideChevronDown, LucideExternalLink, LucideLogIn, LucideUsers } from 'lucide-solid'
+import { useColorMode } from '@kobalte/core'
+import { LucideCheck, LucideChevronRight, LucideExternalLink, LucideLaptop, LucideLogIn, LucideMoon, LucideSun, LucideUsers } from 'lucide-solid'
 import { SiGithub } from 'solid-icons/si'
-import { For, Show } from 'solid-js'
+import { createSignal, For, Show } from 'solid-js'
 import { Button } from '../../lib/components/ui/button.tsx'
 import {
   DropdownMenu,
@@ -10,6 +12,9 @@ import {
   DropdownMenuGroupLabel,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '../../lib/components/ui/dropdown-menu.tsx'
 import { cn } from '../../lib/utils.ts'
@@ -21,9 +26,17 @@ export function NavbarMenu(props: {
   onShowAccounts: () => void
   onShowSettings: () => void
 }) {
+  const { setColorMode } = useColorMode()
+  const [localColorMode, setLocalColorMode] = createSignal(localStorage.getItem('kb-color-mode') as MaybeConfigColorMode)
   const activeAccount = useStore($activeAccount)
   const accounts = useStore($accounts)
 
+  // See: https://github.com/kobaltedev/kobalte/issues/543
+  function updateColorMode(mode: ConfigColorMode) {
+    setLocalColorMode(mode)
+    setColorMode(mode)
+  }
+
   return (
     <Show
       when={activeAccount() != null}
@@ -31,7 +44,7 @@ export function NavbarMenu(props: {
         <Button
           variant="ghost"
           size="icon"
-          class="ml-auto w-auto px-2"
+          class="w-auto px-2"
           onClick={props.onShowAccounts}
         >
           <LucideLogIn class="mr-2 size-4 shrink-0" />
@@ -43,15 +56,14 @@ export function NavbarMenu(props: {
         <DropdownMenuTrigger
           as={(props: DropdownMenuTriggerProps) => (
             <Button
-              class="z-10 ml-auto px-2"
+              class="px-3"
               variant="ghost"
               {...props}
             >
-              <AccountAvatar class="size-6" account={activeAccount()!} />
+              <span class="mr-3 max-w-[120px] truncate">
-              <span class="ml-2 max-w-[120px] truncate">
                 {activeAccount()!.name}
               </span>
-              <LucideChevronDown class="ml-2 size-4" />
+              <AccountAvatar class="size-6" account={activeAccount()!} />
             </Button>
           )}
         />
@@ -87,6 +99,51 @@ export function NavbarMenu(props: {
               <LucideUsers class="mr-2 size-4" />
               Manage accounts
             </DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger class="flex items-center justify-between">
+                <div class="flex flex-row items-center">
+                  <LucideSun class="mr-2 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                  <LucideMoon class="absolute mr-2 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                  Theme
+                </div>
+                <LucideChevronRight class="size-4" />
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent class="w-[128px]">
+                <DropdownMenuItem onSelect={() => updateColorMode('light')}>
+                  <div class="flex w-full items-center justify-between">
+                    <div class="flex flex-row items-center">
+                      <LucideSun class="mr-2 size-4" />
+                      <span>Light</span>
+                    </div>
+                    <div>
+                      <LucideCheck class={`ml-auto size-4 ${localColorMode() !== 'light' ? 'hidden' : ''}`} />
+                    </div>
+                  </div>
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => updateColorMode('dark')}>
+                  <div class="flex w-full items-center justify-between">
+                    <div class="flex flex-row items-center">
+                      <LucideMoon class="mr-2 size-4" />
+                      <span>Dark</span>
+                    </div>
+                    <div>
+                      <LucideCheck class={`ml-auto size-4 ${localColorMode() !== 'dark' ? 'hidden' : ''}`} />
+                    </div>
+                  </div>
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => updateColorMode('system')}>
+                  <div class="flex w-full items-center justify-between">
+                    <div class="flex flex-row items-center">
+                      <LucideLaptop class="mr-2 size-4" />
+                      <span>System</span>
+                    </div>
+                    <div>
+                      <LucideCheck class={`ml-auto size-4 ${localColorMode() !== 'system' ? 'hidden' : ''}`} />
+                    </div>
+                  </div>
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
             <DropdownMenuItem
               as="a"
               class="cursor-pointer"