主题

components/i/UserInfo.vue

@@ -20,19 +20,25 @@
         </ClientOnly>
         <div class="flex justify-between gap-2 p-4">
             <UButton
-                class="flex-grow"
                 color="gray"
                 variant="ghost"
                 label="问题反馈"
             />
-            <UButton
-                :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-                color="gray"
-                variant="ghost"
-                aria-label="Theme"
-                @click="isDark = !isDark"
-            />
             <USelectMenu
+                v-model="colorMode.preference"
+                :ui-menu="{ width: 'w-32' }"
+                :options="themeItems"
+                value-attribute="value"
+            >
+                <UButton
+                    :icon="colorMode.value === 'dark' ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+                    color="gray"
+                    variant="ghost"
+                    aria-label="Theme"
+                />
+            </USelectMenu>
+            <USelectMenu
+                v-if="false"
                 :ui-menu="{ width: 'w-32' }"
                 :model-value="$lang"
                 :options="$langOptions"
@@ -52,15 +58,6 @@ const { $signOut } = useUserStore()
 const { $isSignIn, $info } = storeToRefs(useUserStore())
 const { $lang, $langOptions } = useI18nStore()
 const colorMode = useColorMode()
-const isDark = computed({
-    get () {
-        return colorMode.value === 'dark'
-    },
-    set () {
-        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-    }
-})
-
 const items = [
     [
         {
@@ -82,4 +79,21 @@ const items = [
         }
     ]
 ]
+const themeItems = [
+    {
+        label: '亮色模式',
+        value: 'light',
+        icon: 'i-heroicons-sun'
+    },
+    {
+        label: '深色模式',
+        value: 'dark',
+        icon: 'i-heroicons-moon'
+    },
+    {
+        label: '跟随系统',
+        value: 'system',
+        icon: 'i-heroicons-computer-desktop'
+    }
+]
 </script>