Change theme picker

src/components/header/ColorModeButton.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-const colorMode = useColorMode()
-
-const isDark = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set() {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  },
-})
-</script>
-
-<template>
-  <UButton
-    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-    variant="solid"
-    aria-label="Theme"
-    color="primary"
-    square
-    size="sm"
-    @click="isDark = !isDark"
-  />
-</template>

src/components/header/Header.vue

@@ -5,10 +5,7 @@
         <Logo />
         <NavBar />
         <div class="flex gap-2 items-center">
-          <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
-            <ColorPicker />
-            <ColorModeButton />
-          </div>
+          <ThemePicker />
           <MobileNavBar />
         </div>
       </ClientOnly>

src/components/header/ThemePicker.vue

@@ -5,19 +5,24 @@ import { ColorsTheme } from '~~/types'
 const colors = Object.values(ColorsTheme)
 
 const { getColor, setColor } = useColorStore()
+
+const colorMode = useColorMode()
+const isDark = ref(colorMode.value === 'dark')
+watch(isDark, () => {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+})
 </script>
 
 <template>
   <UPopover
-    :open-delay="60"
-    :close-delay="10"
+    mode="hover"
     :ui="{
       background: 'bg-white dark:bg-stone-900',
       ring: 'ring-1 ring-gray-200 dark:ring-stone-800',
       container: 'z-30',
     }"
   >
-    <UButton trailing-icon="i-heroicons-swatch-20-solid" variant="ghost" color="primary" size="sm" />
+    <UButton trailing-icon="i-ph-paint-brush-bold" variant="ghost" color="primary" size="sm" />
 
     <template #panel>
       <div class="p-2">
@@ -29,7 +34,7 @@ const { getColor, setColor } = useColorStore()
               :ui="{
                 color: {
                   gray: {
-                    solid: 'bg-gray-100 dark:bg-stone-800',
+                    solid: 'bg-gray-200 dark:bg-stone-800',
                     ghost: 'hover:bg-gray-50 dark:hover:bg-stone-800/50',
                   },
                 },
@@ -37,12 +42,20 @@ const { getColor, setColor } = useColorStore()
               :variant="color === getColor ? 'solid' : 'ghost'"
               @click.stop.prevent="setColor(color)"
             >
-              <span class="flex items-center justify-center w-4 h-4 rounded-[4px] border text-white" :class="`bg-${color}-500/80 border-${color}-500`">
+              <span class="flex items-center justify-center w-3 h-3 rounded-full border text-white" :class="`bg-${color}-500/80 border-${color}-500`">
                 <UIcon v-if="color === getColor" name="i-ic-round-check" />
               </span>
             </UButton>
           </UTooltip>
         </div>
+        <UDivider class="my-2" />
+        <div>
+          <UToggle
+            v-model="isDark"
+            on-icon="i-heroicons-moon-20-solid"
+            off-icon="i-heroicons-sun-20-solid"
+          />
+        </div>
       </div>
     </template>
   </UPopover>