diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue index 6fd3763..93d81bb 100644 --- a/src/layout/components/Settings/index.vue +++ b/src/layout/components/Settings/index.vue @@ -79,11 +79,8 @@ const currentThemeColor = computed(() => { }); onMounted(() => { window.document.body.setAttribute("layout", settingsStore.layout); - const theme = - localStorage.getItem("vueuse-color-scheme") || defaultSettings.theme; - settingsStore.changeSetting({ key: "theme", value: theme }); - - if (theme != "light") { + const theme = settingsStore.theme; + if (theme == "dark") { document.documentElement.classList.add("dark"); } diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts index 6689823..ebb391d 100644 --- a/src/store/modules/settings.ts +++ b/src/store/modules/settings.ts @@ -20,9 +20,7 @@ export const useSettingsStore = defineStore("setting", () => { ); const theme = useStorage("theme", defaultSettings.theme); - if (theme.value == "light") { - document.body.classList.remove("dark"); - } + // actions function changeSetting(param: { key: string; value: any }) { const { key, value } = param; @@ -47,6 +45,9 @@ export const useSettingsStore = defineStore("setting", () => { break; case "theme": theme.value = value; + if (theme.value !== "dark") { + document.documentElement.classList.remove("dark"); + } break; } } diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 91057eb..349b929 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -9,7 +9,7 @@ :inactive-icon="IconEpSunny" active-color="var(--el-fill-color-dark)" inactive-color="var(--el-color-primary)" - @change="toggleDark" + @change="handleThemeChange" /> @@ -104,7 +104,7 @@ -
+

Copyright © 2021 - 2023 youlai.tech All Rights Reserved. 有来技术 版权所有 @@ -121,6 +121,7 @@ import LangSelect from "@/components/LangSelect/index.vue"; import SvgIcon from "@/components/SvgIcon/index.vue"; import IconEpSunny from "~icons/ep/sunny"; import IconEpMoon from "~icons/ep/moon"; +import { useSettingsStore } from "@/store/modules/settings"; // 状态管理依赖 import { useUserStore } from "@/store/modules/user"; @@ -138,6 +139,14 @@ const route = useRoute(); const isDark = useDark(); const toggleDark = () => useToggle(isDark); +function handleThemeChange() { + toggleDark(); + useSettingsStore().changeSetting({ + key: "theme", + value: isDark.value ? "dark" : "light", + }); +} + /** * 按钮loading */ @@ -264,6 +273,16 @@ function handleLogin() { onMounted(() => { getCaptcha(); + + // 主题初始化 + const theme = useSettingsStore().theme; + console.log("登录页面主题", theme); + useSettingsStore().changeSetting({ key: "theme", value: theme }); + if (theme == "dark") { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } }); @@ -275,6 +294,7 @@ onMounted(() => { .login-container { @apply w-full h-full flex-center; + overflow-y: auto; background: url("@/assets/images/login-bg.jpg") no-repeat center right; .login-form {