diff --git a/src/App.vue b/src/App.vue index da4ac7d..1df0ab9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,8 +4,10 @@ import { useTheme } from "@/hooks/useTheme" import { ElNotification } from "element-plus" import zhCn from "element-plus/lib/locale/lang/zh-cn" +const { initTheme } = useTheme() + /** 初始化主题 */ -useTheme() +initTheme() /** 将 Element Plus 的语言设置为中文 */ const locale = zhCn diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts index 636231e..d0c8e27 100644 --- a/src/hooks/useTheme.ts +++ b/src/hooks/useTheme.ts @@ -40,13 +40,15 @@ const setHtmlClassName = (value: ThemeName) => { document.documentElement.className = value } -watchEffect(() => { - const value = activeThemeName.value - setHtmlClassName(value) - setActiveThemeName(value) -}) +const initTheme = () => { + watchEffect(() => { + const value = activeThemeName.value + setHtmlClassName(value) + setActiveThemeName(value) + }) +} /** 主题 hook */ export function useTheme() { - return { themeList, activeThemeName, setTheme } + return { themeList, activeThemeName, initTheme, setTheme } }