feat: implement theme toggle functionality with useTheme composable

app/components/chat/CommandPalette.vue

@@ -8,6 +8,11 @@ const openClearModal = ref(false)
 
 const { t } = useI18n({ useScope: 'local' })
 
+const { isDark, toggleDark } = useTheme()
+defineShortcuts({
+  t: () => toggleDark({ clientX: window.innerWidth, clientY: 0 }),
+})
+
 const { messages, submitMessage } = useChat(t)
 const { clearMessages, messages: storeMessages } = useChatStore()
 const loading = computed(() => storeMessages.some(msg => msg.state === ChatState.LOADING))
@@ -46,7 +51,7 @@ const commandPaletteUi = {
 
 <template>
   <nav class="fixed bottom-0 left-1/2 z-50 -translate-x-1/2 pb-8">
-    <UCard variant="subtle" class="rounded-xl" :ui="{ body: 'p-2 sm:p-2' }">
+    <UCard variant="subtle" class="rounded-xl bg-neutral-100 dark:bg-neutral-800 shadow-lg" :ui="{ body: 'p-2 sm:p-2 flex gap-2' }">
       <UFieldGroup>
         <UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
           <UButton
@@ -130,6 +135,13 @@ const commandPaletteUi = {
           </template>
         </UModal>
       </UFieldGroup>
+      <UButton
+        :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
+        color="neutral"
+        variant="solid"
+        size="xl"
+        @click.prevent="toggleDark"
+      />
     </UCard>
   </nav>
 </template>

app/components/tool/Theme.vue

@@ -1,64 +1,6 @@
 <script lang="ts" setup>
-const colorMode = useColorMode()
 const { t } = useI18n({ useScope: 'local' })
-
-const isDark = computed({
-  get: () => colorMode.value === 'dark',
-  set: (val: boolean) => {
-    colorMode.preference = val ? 'dark' : 'light'
-  },
-})
-const dark = computed({
-  get: () => colorMode.value === 'dark',
-  set: () => {},
-})
-
-function toggleDark(event: MouseEvent | { clientX: number, clientY: number }) {
-  // @ts-expect-error experimental API
-  const isAppearanceTransition = document.startViewTransition
-    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-  if (!isAppearanceTransition) {
-    isDark.value = !isDark.value
-    return
-  }
-
-  const x = event.clientX
-  const y = event.clientY
-  const endRadius = Math.hypot(
-    Math.max(x, innerWidth - x),
-    Math.max(y, innerHeight - y),
-  )
-  const transition = document.startViewTransition(async () => {
-    isDark.value = !isDark.value
-    await nextTick()
-  })
-  transition.ready
-    .then(() => {
-      const clipPath = [
-        `circle(0px at ${x}px ${y}px)`,
-        `circle(${endRadius}px at ${x}px ${y}px)`,
-      ]
-      document.documentElement.animate(
-        {
-          clipPath: colorMode.value === 'dark'
-            ? [...clipPath].reverse()
-            : clipPath,
-        },
-        {
-          duration: 400,
-          easing: 'ease-out',
-          pseudoElement: colorMode.value === 'dark'
-            ? '::view-transition-old(root)'
-            : '::view-transition-new(root)',
-        },
-      )
-    })
-}
-
-defineShortcuts({
-  t: () => toggleDark({ clientX: window.innerWidth, clientY: 0 }),
-})
+const { dark, toggleDark } = useTheme()
 </script>
 
 <template>

app/composables/theme.ts

@@ -0,0 +1,63 @@
+export function useTheme() {
+  const colorMode = useColorMode()
+
+  const isDark = computed({
+    get: () => colorMode.value === 'dark',
+    set: (val: boolean) => {
+      colorMode.preference = val ? 'dark' : 'light'
+    },
+  })
+  const dark = computed({
+    get: () => colorMode.value === 'dark',
+    set: () => {},
+  })
+
+  function toggleDark(event: MouseEvent | { clientX: number, clientY: number }) {
+  // @ts-expect-error experimental API
+    const isAppearanceTransition = document.startViewTransition
+      && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    if (!isAppearanceTransition) {
+      isDark.value = !isDark.value
+      return
+    }
+
+    const x = event.clientX
+    const y = event.clientY
+    const endRadius = Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y),
+    )
+    const transition = document.startViewTransition(async () => {
+      isDark.value = !isDark.value
+      await nextTick()
+    })
+    transition.ready
+      .then(() => {
+        const clipPath = [
+          `circle(0px at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ]
+        document.documentElement.animate(
+          {
+            clipPath: colorMode.value === 'dark'
+              ? [...clipPath].reverse()
+              : clipPath,
+          },
+          {
+            duration: 400,
+            easing: 'ease-out',
+            pseudoElement: colorMode.value === 'dark'
+              ? '::view-transition-old(root)'
+              : '::view-transition-new(root)',
+          },
+        )
+      })
+  }
+
+  return {
+    isDark,
+    dark,
+    toggleDark,
+  }
+}