feat: color mode

components/TheHeader.vue

@@ -90,35 +90,57 @@ const dropdownItems = [
     }
   ]
 ]
+
+const colorMode = useColorMode()
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
 </script>
 
 <template>
   <header class="flex items-center justify-between py-4">
     <TextLogo />
 
     <ClientOnly>
-      <UDropdown
-        :items="dropdownItems"
-        :ui="{ item: { disabled: 'cursor-text select-text' } }"
-        :popper="{ placement: 'bottom-start' }"
-      >
-        <UAvatar size="md" :src="state.avatar" :alt="state.name" />
-
-        <template #account>
-          <span class="truncate font-medium text-gray-900 dark:text-white">
-            {{ user?.username }}
-          </span>
-        </template>
-
-        <template #item="{ item }">
-          <span class="truncate">{{ item.label }}</span>
-
-          <UIcon
-            :name="item.icon"
-            class="ms-auto h-4 w-4 flex-shrink-0 text-gray-400 dark:text-gray-500"
-          />
-        </template>
-      </UDropdown>
+      <div class="flex items-center gap-4">
+        <UButton
+          :icon="
+            isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'
+          "
+          color="gray"
+          variant="ghost"
+          aria-label="Theme"
+          @click="isDark = !isDark"
+        />
+
+        <UDropdown
+          :items="dropdownItems"
+          :ui="{ item: { disabled: 'cursor-text select-text' } }"
+          :popper="{ placement: 'bottom-start' }"
+        >
+          <UAvatar size="md" :src="state.avatar" :alt="state.name" />
+
+          <template #account>
+            <span class="truncate font-medium text-gray-900 dark:text-white">
+              {{ user?.username }}
+            </span>
+          </template>
+
+          <template #item="{ item }">
+            <span class="truncate">{{ item.label }}</span>
+
+            <UIcon
+              :name="item.icon"
+              class="ms-auto h-4 w-4 flex-shrink-0 text-gray-400 dark:text-gray-500"
+            />
+          </template>
+        </UDropdown>
+      </div>
     </ClientOnly>
 
     <UModal v-model="isSettingsModalOpen">

package.json

@@ -15,7 +15,7 @@
     "@0no-co/graphqlsp": "^1.7.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/fonts": "^0.4.0",
+    "@nuxt/fonts": "^0.5.1",
     "@nuxt/ui": "^2.14.2",
     "@nuxtjs/i18n": "^8.2.0",
     "@pinia/nuxt": "^0.5.1",