fix vant组件夜间模式切换有不生效

.env.development

@@ -5,7 +5,7 @@ VITE_PORT=9100
 VITE_PUBLIC_PATH=/h5
 
 # 跨域代理，可以配置多个，请注意不要换行
- VITE_PROXY=[["/server","http://localhost:10880"]]
+ VITE_PROXY=[["/server","http://localhost:9999"]]
 
 # API 接口地址
 VITE_GLOB_API_URL=

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <vanConfigProvider :theme="getDarkMode" :theme-vars="getThemeVars()">
+  <vanConfigProvider :theme="darkMode" :theme-vars="getThemeVars()">
     <routerView v-slot="{ Component }">
       <div class="absolute bottom-0 top-0 w-full overflow-hidden">
         <transition :name="getTransitionName" mode="out-in" appear>
@@ -18,8 +18,10 @@ import { useRouteStore } from '@/store/modules/route'
 import { useDesignSetting } from '@/hooks/setting/useDesignSetting'
 
 const routeStore = useRouteStore()
-const { getDarkMode, getAppTheme, getIsPageAnimate, getPageAnimateType } = useDesignSetting()
-
+const { getAppTheme, getIsPageAnimate, getPageAnimateType } = useDesignSetting()
+// 读取是否为夜间模式
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+const darkMode = mediaQuery.matches ? 'dark' : 'light'
 // 需要缓存的路由组件
 const keepAliveComponents = computed(() => routeStore.keepAliveComponents)
 

src/hooks/setting/useDesignSetting.ts

@@ -4,8 +4,6 @@ import { useDesignSettingStore } from '@/store/modules/designSetting'
 export function useDesignSetting() {
   const designStore = useDesignSettingStore()
 
-  const getDarkMode = computed(() => designStore.darkMode)
-
   const getAppTheme = computed(() => designStore.appTheme)
 
   const getAppThemeList = computed(() => designStore.appThemeList)
@@ -15,7 +13,6 @@ export function useDesignSetting() {
   const getPageAnimateType = computed(() => designStore.pageAnimateType)
 
   return {
-    getDarkMode,
     getAppTheme,
     getAppThemeList,
     getIsPageAnimate,

src/settings/designSetting.ts

@@ -1,8 +1,6 @@
 // app theme preset color
 
 export interface DesignSettingState {
-  // 系统主题
-  darkMode: 'light' | 'dark'
   // 系统风格
   appTheme: string
   // 系统内置风格
@@ -36,8 +34,6 @@ export const appThemeList: string[] = [
 ]
 
 const setting: DesignSettingState = {
-  // 深色主题
-  darkMode: 'dark',
   // 系统主题色
   appTheme: '#5d9dfe',
   // 系统内置主题色列表

src/store/modules/designSetting.ts

@@ -3,21 +3,17 @@ import { store } from '@/store'
 import designSetting from '@/settings/designSetting'
 import type { DesignSettingState } from '@/settings/designSetting'
 
-const { darkMode, appTheme, appThemeList, isPageAnimate, pageAnimateType } = designSetting
+const {  appTheme, appThemeList, isPageAnimate, pageAnimateType } = designSetting
 
 export const useDesignSettingStore = defineStore({
   id: 'app-design-setting',
   state: (): DesignSettingState => ({
-    darkMode,
     appTheme,
     appThemeList,
     isPageAnimate,
     pageAnimateType,
   }),
   getters: {
-    getDarkMode(): 'light' | 'dark' {
-      return this.darkMode
-    },
     getAppTheme(): string {
       return this.appTheme
     },
@@ -32,9 +28,6 @@ export const useDesignSettingStore = defineStore({
     },
   },
   actions: {
-    setDarkMode(mode: 'light' | 'dark'): void {
-      this.darkMode = mode
-    },
     setPageAnimateType(type: string): void {
       this.pageAnimateType = type
     },