fix: 切换主题不成功

Author: LOG1997

package.json

@@ -27,7 +27,6 @@
         "pinia": "^2.2.6",
         "pinia-plugin-persist": "^1.0.0",
         "sparticles": "^1.3.1",
-        "theme-change": "^2.5.0",
         "three": "^0.166.0",
         "three-css3d": "^1.0.6",
         "vue": "^3.5.13",

src/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import PlayMusic from '@/components/PlayMusic/index.vue'
 import useStore from '@/store'
+import { themeChange } from '@/utils'
 import { storeToRefs } from 'pinia'
-import { themeChange } from 'theme-change'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -14,10 +14,6 @@ const { getTheme: localTheme } = storeToRefs(globalConfig)
 const { getPrizeConfig: prizeList } = storeToRefs(prizeConfig)
 
 const tipDialog = ref()
-// const isMobileValue = ref(structuredClone(isMobile.value))
-function setLocalTheme(theme: any) {
-  themeChange(theme.name)
-}
 
 // 设置当前奖列表
 function setCurrentPrize() {
@@ -53,7 +49,7 @@ function judgeChromeOrEdge() {
   return isChrome || isEdge
 }
 onMounted(() => {
-  setLocalTheme(localTheme.value)
+  themeChange(localTheme.value.name)
   setCurrentPrize()
   if (judgeMobile() || !judgeChromeOrEdge()) {
     tipDialog.value.showModal()

src/utils/index.ts

@@ -39,3 +39,12 @@ export function selectCard(cardIndexArr: number[], tableLength: number, personId
 
   return cardIndex
 }
+
+export function themeChange(theme: string) {
+  // 获取根html
+  const html = document.querySelectorAll('html')
+  if (html) {
+    html[0].setAttribute('data-theme', theme)
+    localStorage.setItem('theme', theme)
+  }
+}

src/views/Config/Global/FaceConfig.vue

@@ -2,10 +2,10 @@
 import i18n, { languageList } from '@/locales/i18n'
 
 import useStore from '@/store'
+import { themeChange } from '@/utils'
 import { isHex, isRgbOrRgba } from '@/utils/color'
 import daisyuiThemes from 'daisyui/src/theming/themes'
 import { storeToRefs } from 'pinia'
-import { themeChange } from 'theme-change'
 import { onMounted, ref, watch } from 'vue'
 import { ColorPicker } from 'vue3-colorpicker'
 import { useI18n } from 'vue-i18n'