修改hook

src/App.vue

@@ -5,11 +5,32 @@ import Type from "@/components/Type.vue";
 import Side from "@/components/Side.vue";
 import Statistics from "@/components/Modal/Statistics.vue";
 import Backgorund from "@/components/Backgorund.vue";
+import {onMounted} from "vue";
+import {useBaseStore} from "@/stores/base.ts";
 
+const store = useBaseStore()
+// 查询当前系统主题颜色
+const match: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
+// 监听系统主题变化
+match.addEventListener('change', followSystem)
+
+function followSystem() {
+  if (store.theme === 'auto') {
+    const theme = match.matches ? 'dark' : 'light'
+    document.documentElement.setAttribute('data-theme', theme)
+    // document.documentElement.setAttribute('data-theme', 'dark')
+    localStorage.setItem('appearance', theme)
+  }
+}
+
+onMounted(() => {
+  store.init()
+  followSystem()
+})
 </script>
 
 <template>
-<!--    <Backgorund/>-->
+  <Backgorund/>
   <div class="main-page">
     <div class="center">
       <Toolbar/>

src/components/BaseButton.vue

@@ -47,7 +47,7 @@ defineEmits(['click'])
     font-size: 16rem;
     color: white;
 
-    ::v-deep a {
+    :deep(a) {
       color: white;
     }
   }

src/components/IconWrapper.vue

@@ -33,7 +33,7 @@ $w: 20rem;
     color: white;
   }
 
-  ::v-deep svg {
+  :deep(svg) {
     width: $w;
     height: $w;
   }

src/components/Modal/Statistics.vue

@@ -6,7 +6,7 @@ import Ring from "@/components/Ring.vue";
 import Tooltip from "@/components/Tooltip.vue";
 import Fireworks from "@/components/Fireworks.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import {DictType} from "@/types.js";
+import {DictType} from "@/types.ts";
 
 const store = useBaseStore()
 

src/components/Toolbar/Toolbar.vue

@@ -13,7 +13,7 @@ import {
   Bug,
   UploadOne
 } from "@icon-park/vue-next"
-import useThemeColor from "@/hooks/useThemeColor.ts"
+import useTheme from "@/hooks/useTheme.ts"
 import {useBaseStore} from "@/stores/base.ts"
 import SettingModal from "@/components/Toolbar/SettingModal.vue"
 import FeedbackModal from "@/components/Toolbar/FeedbackModal.vue"
@@ -32,7 +32,7 @@ import IconEyeSlash from '~icons/heroicons/eye-slash-solid'
 import IconRepeat from '~icons/tabler/repeat'
 import IconRepeatOff from '~icons/tabler/repeat-off'
 
-const {appearance, toggle} = useThemeColor()
+const { toggle} = useTheme()
 const store = useBaseStore()
 const showFeedbackModal = $ref(false)
 const showSettingModal = $ref(false)
@@ -51,7 +51,7 @@ function t() {
     <div class="options">
       <Tooltip title="切换主题">
         <IconWrapper>
-          <moon v-if="appearance === 'dark'"
+          <moon v-if="store.theme === 'dark'"
                 @click="toggle"/>
           <sun-one v-else @click="toggle"/>
         </IconWrapper>

src/components/Type.vue

@@ -20,7 +20,7 @@ import {usePlayWordAudio} from "@/hooks/usePlayWordAudio.ts"
 import DictModal from "@/components/Modal/DictModal.vue"
 import Backgorund from "@/components/Backgorund.vue"
 import Statistics from "@/components/Modal/Statistics.vue";
-import useThemeColor from "@/hooks/useThemeColor";
+import useTheme from "@/hooks/useTheme.ts";
 import Tooltip from "@/components/Tooltip.vue";
 import Toolbar from "@/components/Toolbar/Toolbar.vue"
 import {KeyboardOne} from "@icon-park/vue-next";
@@ -54,7 +54,6 @@ const restWord = $computed(() => {
   return store.word.name.slice(input.length + wrong.length)
 })
 onMounted(() => {
-  store.init()
   window.addEventListener('keydown', onKeyDown)
   window.addEventListener('keyup', onKeyUp)
 })
@@ -183,7 +182,7 @@ const progress = $computed(() => {
   return ((store.currentDict.wordIndex / store.chapter.length) * 100)
 })
 
-const {appearance, toggle} = useThemeColor()
+const { toggle} = useTheme()
 
 function format(val: number, suffix: string = '') {
   return val === -1 ? '-' : (val + suffix)

src/hooks/useTheme.ts

@@ -0,0 +1,18 @@
+import {useBaseStore} from "@/stores/base.ts";
+
+export default function useTheme() {
+  const store = useBaseStore()
+
+  function toggle() {
+    if (store.theme === 'auto') {
+      store.theme = 'dark'
+    } else {
+      store.theme = store.theme === 'light' ? 'dark' : 'light'
+    }
+    document.documentElement.setAttribute('data-theme', store.theme)
+  }
+
+  return {
+    toggle
+  }
+}

src/hooks/useThemeColor.ts

@@ -1,39 +0,0 @@
-// 获取主题变量
-import {ref, watchEffect} from "vue";
-
-let appearance = ref<string>(localStorage.getItem('appearance') || 'auto')
-// 查询当前系统主题颜色
-const match: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
-// 监听系统主题变化
-match.addEventListener('change', followSystem)
-
-function followSystem() {
-  const theme = match.matches ? 'dark' : 'light'
-  document.documentElement.setAttribute('data-theme', theme)
-  // document.documentElement.setAttribute('data-theme', 'dark')
-}
-
-watchEffect(() => {
-// 如果主题变量为 auto, 则跟随系统主题
-  if (appearance.value === 'auto') {
-    followSystem()
-  } else {
-    document.documentElement.setAttribute('data-theme', appearance.value)
-  }
-})
-
-function toggle() {
-  if (appearance.value === 'auto') {
-    appearance.value = match.matches ? 'light' : 'dark'
-  } else {
-    appearance.value = appearance.value === 'light' ? 'dark' : 'light'
-  }
-}
-
-export default function useThemeColor() {
-
-  return {
-    appearance,
-    toggle
-  }
-}

src/stores/base.ts

@@ -121,7 +121,8 @@ export const useBaseStore = defineStore('base', {
         value2: 50,
         value3: 1,
         value4: false,
-      }
+      },
+      theme: 'auto'
     }
   },
   getters: {
@@ -203,7 +204,6 @@ export const useBaseStore = defineStore('base', {
         })
       }
       this.dict.wordIndex = 0
-      this.dictModalIsOpen2 = false
     },
     async changeDict(dict: Dict, chapterIndex: number = -1, wordIndex: number = -1) {
       console.log('changeDict', dict)

src/types.ts

@@ -144,6 +144,7 @@ export interface State {
   sideIsOpen: boolean,
   statModalIsOpen: boolean,
   isDictation: boolean,
+  theme: string,
   setting: {
     showToolbar: boolean,
     show: boolean,