diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index ba2d84ddf..69af67ade 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -1,4 +1,13 @@
 <script setup lang="ts">
+import {
+  ref,
+  unref,
+  watch,
+  reactive,
+  computed,
+  nextTick,
+  onBeforeMount
+} from "vue";
 import {
   useDark,
   debounce,
@@ -17,7 +26,6 @@ import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
 import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { ref, unref, watch, reactive, computed, nextTick } from "vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 
 import dayIcon from "@/assets/svg/day.svg?component";
@@ -189,16 +197,6 @@ function setLayoutModel(layout: string) {
   useAppStoreHook().setLayout(layout);
 }
 
-/* 初始化项目配置 */
-nextTick(() => {
-  settings.greyVal &&
-    document.querySelector("html")?.setAttribute("class", "html-grey");
-  settings.weakVal &&
-    document.querySelector("html")?.setAttribute("class", "html-weakness");
-  settings.tabsVal && tagsChange();
-  dataThemeChange();
-});
-
 watch($storage, ({ layout }) => {
   switch (layout["layout"]) {
     case "vertical":
@@ -218,6 +216,18 @@ watch($storage, ({ layout }) => {
       break;
   }
 });
+
+onBeforeMount(() => {
+  dataThemeChange();
+  /* 初始化项目配置 */
+  nextTick(() => {
+    settings.greyVal &&
+      document.querySelector("html")?.setAttribute("class", "html-grey");
+    settings.weakVal &&
+      document.querySelector("html")?.setAttribute("class", "html-weakness");
+    settings.tabsVal && tagsChange();
+  });
+});
 </script>
 
 <template>