修改hook

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)