fix: 深色主题跟随系统切换时显示错误

src/components/Application/src/AppDarkModeToggle.vue

@@ -3,12 +3,11 @@ import { computed, unref } from 'vue'
 import { SvgIcon } from '@/components/Icon'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useRootSetting } from '@/hooks/setting/useRootSetting'
-import { updateHeaderBgColor, updateSidebarBgColor } from '@/logics/theme/updateBackground'
 import { updateDarkTheme } from '@/logics/theme/dark'
 import { ThemeEnum } from '@/enums/appEnum'
 
 const { prefixCls } = useDesign('dark-switch')
-const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting()
+const { getDarkMode, getShowDarkModeToggle } = useRootSetting()
 
 const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK)
 
@@ -21,10 +20,7 @@ const getClass = computed(() => [
 
 function toggleDarkMode() {
   const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK
-  setDarkMode(darkMode)
   updateDarkTheme(darkMode)
-  updateHeaderBgColor()
-  updateSidebarBgColor()
 }
 </script>
 

src/logics/theme/dark.ts

@@ -1,9 +1,18 @@
 import { useDark, useToggle } from '@vueuse/core'
+import { ThemeEnum } from '@/enums/appEnum'
+import { updateHeaderBgColor, updateSidebarBgColor } from '@/logics/theme/updateBackground'
+import { useAppStoreWithOut } from '@/store/modules/app'
 
 const isDark = useDark({
   attribute: 'data-theme',
   valueDark: 'dark',
   valueLight: 'light',
+  onChanged(isDark, defaultHandler, mode) {
+    useAppStoreWithOut().setDarkMode(isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT)
+    defaultHandler(mode)
+    updateHeaderBgColor()
+    updateSidebarBgColor()
+  },
 })
 const toggleDark = useToggle(isDark)
 

src/logics/theme/updateBackground.ts

@@ -1,6 +1,6 @@
 import { setCssVar } from './util'
 import { colorIsDark, darken, lighten } from '@/utils/color'
-import { useAppStore } from '@/store/modules/app'
+import { useAppStoreWithOut } from '@/store/modules/app'
 import { ThemeEnum } from '@/enums/appEnum'
 
 const HEADER_BG_COLOR_VAR = '--header-bg-color'
@@ -16,7 +16,7 @@ const SIDER_LIGHTEN_BG_COLOR = '--sider-dark-lighten-bg-color'
  * @param color
  */
 export function updateHeaderBgColor(color?: string) {
-  const appStore = useAppStore()
+  const appStore = useAppStoreWithOut()
   const darkMode = appStore.getDarkMode === ThemeEnum.DARK
   if (!color) {
     if (darkMode)
@@ -47,7 +47,7 @@ export function updateHeaderBgColor(color?: string) {
  * @param color  bg color
  */
 export function updateSidebarBgColor(color?: string) {
-  const appStore = useAppStore()
+  const appStore = useAppStoreWithOut()
 
   // if (!isHexColor(color)) return;
   const darkMode = appStore.getDarkMode === ThemeEnum.DARK