refactor: 使用自定义useAppDark替代vueuse的useDark

将ThemeMode组件和app store中的useDark替换为自定义的useAppDark composable,统一暗色模式管理逻辑

web1/src/composables/useAppDark.js

@@ -0,0 +1,14 @@
+import { useDark } from '@vueuse/core'
+
+const darkOptions = {
+  selector: 'html',
+  attribute: 'class',
+  valueDark: 'dark',
+  valueLight: '',
+  storageKey: 'guzhi-color-scheme',
+  initialValue: 'light',
+}
+
+export function useAppDark() {
+  return useDark(darkOptions)
+}

web1/src/layout/components/header/components/ThemeMode.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { useAppStore } from '@/store'
-import { useDark, useToggle } from '@vueuse/core'
+import { useToggle } from '@vueuse/core'
+import { useAppDark } from '@/composables/useAppDark'
 
 const appStore = useAppStore()
-const isDark = useDark()
+const isDark = useAppDark()
 const toggleDark = () => {
   appStore.toggleDark()
   useToggle(isDark)()

web1/src/store/modules/app/index.js

@@ -1,12 +1,12 @@
 import { defineStore } from 'pinia'
-import { useDark } from '@vueuse/core'
 import { lStorage } from '@/utils'
 import i18n from '~/i18n'
+import { useAppDark } from '@/composables/useAppDark'
 
 const currentLocale = lStorage.get('locale')
 const { locale } = i18n.global
 
-const isDark = useDark()
+const isDark = useAppDark()
 export const useAppStore = defineStore('app', {
   state() {
     return {