明暗模式设置为跟随系统时，支持动态切换

Author: hooray

src/layouts/components/AppSetting/index.vue

@@ -17,15 +17,6 @@ const menuStore = useMenuStore()
 
 const isShow = ref(false)
 
-const isDark = computed({
-  get() {
-    return settingsStore.settings.app.colorScheme === 'dark'
-  },
-  set(value) {
-    settingsStore.settings.app.colorScheme = value ? 'dark' : 'light'
-  },
-})
-
 watch(() => settingsStore.settings.menu.menuMode, (value) => {
   if (value === 'single') {
     menuStore.setActived(0)
@@ -97,7 +88,15 @@ function handleCopy() {
       颜色主题风格
     </div>
     <div class="flex items-center justify-center pb-4">
-      <HToggle v-model="isDark" on-icon="ri:sun-line" off-icon="ri:moon-line" />
+      <HTabList
+        v-model="settingsStore.settings.app.colorScheme"
+        :options="[
+          { icon: 'i-ri:sun-line', label: '明亮', value: 'light' },
+          { icon: 'i-ri:moon-line', label: '暗黑', value: 'dark' },
+          { icon: 'i-ri:computer-line', label: '系统', value: '' },
+        ]"
+        class="w-60"
+      />
     </div>
     <div v-if="settingsStore.mode === 'pc'" class="divider">
       导航栏模式

src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue

@@ -9,7 +9,7 @@ const settingsStore = useSettingsStore()
 
 function toggleColorScheme(event: MouseEvent) {
   const { startViewTransition } = useViewTransition(() => {
-    settingsStore.setColorScheme(settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark')
+    settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
   })
   startViewTransition()?.ready.then(() => {
     const x = event.clientX
@@ -37,7 +37,24 @@ function toggleColorScheme(event: MouseEvent) {
 </script>
 
 <template>
-  <span class="flex-center cursor-pointer px-2 py-1" @click="toggleColorScheme">
-    <SvgIcon :name="settingsStore.settings.app.colorScheme === 'light' ? 'i-ri:sun-line' : 'i-ri:moon-line'" />
-  </span>
+  <HDropdown class="flex-center cursor-pointer px-2 py-1">
+    <SvgIcon
+      :name="{
+        '': 'i-ri:computer-line',
+        'light': 'i-ri:sun-line',
+        'dark': 'i-ri:moon-line',
+      }[settingsStore.settings.app.colorScheme]" @click="toggleColorScheme"
+    />
+    <template #dropdown>
+      <HTabList
+        v-model="settingsStore.settings.app.colorScheme"
+        :options="[
+          { icon: 'i-ri:sun-line', label: '', value: 'light' },
+          { icon: 'i-ri:moon-line', label: '', value: 'dark' },
+          { icon: 'i-ri:computer-line', label: '', value: '' },
+        ]"
+        class="m-3"
+      />
+    </template>
+  </HDropdown>
 </template>

src/layouts/ui-kit/HTabList.vue

@@ -3,6 +3,7 @@ import { Tab, TabGroup, TabList } from '@headlessui/vue'
 
 const props = defineProps<{
   options: {
+    icon?: string
     label: any
     value: T
   }[]
@@ -37,11 +38,12 @@ function handleChange(index: number) {
     <TabList class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark:bg-stone-9 dark:ring-stone-8">
       <Tab v-for="(option, index) in options" :key="index" v-slot="{ selected }" as="template">
         <button
-          class="w-full inline-flex items-center justify-center truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark:text-white focus:outline-none focus:ring-2 dark:ring-stone-8" :class="{
+          class="w-full inline-flex items-center justify-center gap-1 break-keep border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark:text-white focus:outline-none focus:ring-2 dark:ring-stone-8" :class="{
             'cursor-default bg-white dark:bg-dark-9': selected,
-            'cursor-pointer opacity-50 transition hover:(opacity-100)': !selected,
+            'cursor-pointer opacity-50 hover:(opacity-100)': !selected,
           }"
         >
+          <SvgIcon v-if="option.icon" :name="option.icon" class="flex-shrink-0" />
           {{ option.label }}
         </button>
       </Tab>

src/layouts/ui-kit/HTooltip.vue

@@ -2,7 +2,7 @@
 withDefaults(
   defineProps<{
     text: string
-    enable: boolean
+    enable?: boolean
   }>(),
   {
     text: '',
@@ -20,5 +20,7 @@ withDefaults(
       </slot>
     </template>
   </VTooltip>
-  <slot v-else />
+  <div v-else>
+    <slot />
+  </div>
 </template>

src/store/modules/settings.ts

@@ -8,10 +8,28 @@ const useSettingsStore = defineStore(
   'settings',
   () => {
     const settings = ref(settingsDefault)
-    watch(() => settings.value.app.colorScheme, (colorScheme) => {
+
+    const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)')
+    const currentColorScheme = ref<Exclude<Settings.app['colorScheme'], ''>>()
+    watch(() => settings.value.app.colorScheme, (val) => {
+      if (val === '') {
+        prefersColorScheme.addEventListener('change', updateTheme)
+      }
+      else {
+        prefersColorScheme.removeEventListener('change', updateTheme)
+      }
+    }, {
+      immediate: true,
+    })
+    watch(() => settings.value.app.colorScheme, updateTheme, {
+      immediate: true,
+    })
+    function updateTheme() {
+      let colorScheme = settings.value.app.colorScheme
       if (colorScheme === '') {
-        colorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        colorScheme = prefersColorScheme.matches ? 'dark' : 'light'
       }
+      currentColorScheme.value = colorScheme
       switch (colorScheme) {
         case 'light':
           document.documentElement.classList.remove('dark')
@@ -20,9 +38,8 @@ const useSettingsStore = defineStore(
           document.documentElement.classList.add('dark')
           break
       }
-    }, {
-      immediate: true,
-    })
+    }
+
     watch(() => settings.value.menu.menuMode, (val) => {
       document.body.setAttribute('data-menu-mode', val)
     }, {
@@ -107,6 +124,7 @@ const useSettingsStore = defineStore(
 
     return {
       settings,
+      currentColorScheme,
       os,
       title,
       setTitle,