fix: Login页面主题设置不生效

arco-design-pro-vite/src/App.vue

@@ -11,6 +11,7 @@
   import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
   import GlobalSetting from '@/components/global-setting/index.vue';
   import useLocale from '@/hooks/locale';
+  import useThemes from '@/hooks/themes';
 
   const { currentLocale } = useLocale();
   const locale = computed(() => {
@@ -23,4 +24,6 @@
         return enUS;
     }
   });
+
+  useThemes();
 </script>

arco-design-pro-vite/src/components/navbar/index.vue

@@ -195,11 +195,12 @@
 <script lang="ts" setup>
   import { computed, ref, inject } from 'vue';
   import { Message } from '@arco-design/web-vue';
-  import { useDark, useToggle, useFullscreen } from '@vueuse/core';
+  import { useFullscreen } from '@vueuse/core';
   import { useAppStore, useUserStore } from '@/store';
   import { LOCALE_OPTIONS } from '@/locale';
   import useLocale from '@/hooks/locale';
   import useUser from '@/hooks/user';
+  import useThemes from '@/hooks/themes';
   import Menu from '@/components/menu/index.vue';
   import MessageBox from '../message-box/index.vue';
 
@@ -216,18 +217,8 @@
     return appStore.theme;
   });
   const topMenu = computed(() => appStore.topMenu && appStore.menu);
-  const isDark = useDark({
-    selector: 'body',
-    attribute: 'arco-theme',
-    valueDark: 'dark',
-    valueLight: 'light',
-    storageKey: 'arco-theme',
-    onChanged(dark: boolean) {
-      // overridden default behavior
-      appStore.toggleTheme(dark);
-    },
-  });
-  const toggleTheme = useToggle(isDark);
+
+  const { toggleTheme } = useThemes();
   const handleToggleTheme = () => {
     toggleTheme();
   };

arco-design-pro-vite/src/hooks/themes.ts

@@ -1,12 +1,26 @@
 import { computed } from 'vue';
 import { useAppStore } from '@/store';
+import { useDark, useToggle } from '@vueuse/core';
 
 export default function useThemes() {
   const appStore = useAppStore();
-  const isDark = computed(() => {
-    return appStore.theme === 'dark';
+
+  const isDark = useDark({
+    selector: 'body',
+    attribute: 'arco-theme',
+    valueDark: 'dark',
+    valueLight: 'light',
+    storageKey: 'arco-theme',
+    onChanged(dark: boolean) {
+      // overridden default behavior
+      appStore.toggleTheme(dark);
+    },
   });
+
+  const toggleTheme = useToggle(isDark);
+
   return {
     isDark,
+    toggleTheme,
   };
 }