From f64570facdefe1dc035fe60f8e8aed3fb5a35016 Mon Sep 17 00:00:00 2001
From: K <1175047471@qq.com>
Date: Tue, 19 Mar 2024 14:39:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=B7=9F=E9=9A=8F=E7=B3=BB=E7=BB=9F=E5=88=87=E6=8D=A2=E6=97=B6?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Application/src/AppDarkModeToggle.vue | 6 +-----
 src/logics/theme/dark.ts                             | 9 +++++++++
 src/logics/theme/updateBackground.ts                 | 6 +++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Application/src/AppDarkModeToggle.vue b/src/components/Application/src/AppDarkModeToggle.vue
index 1a51fcad..e28e378a 100644
--- a/src/components/Application/src/AppDarkModeToggle.vue
+++ b/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>
 
diff --git a/src/logics/theme/dark.ts b/src/logics/theme/dark.ts
index c9f3325f..e1531f00 100644
--- a/src/logics/theme/dark.ts
+++ b/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)
 
diff --git a/src/logics/theme/updateBackground.ts b/src/logics/theme/updateBackground.ts
index 2947d2c4..357aa22a 100644
--- a/src/logics/theme/updateBackground.ts
+++ b/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