diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts index 7c2acec..691b482 100644 --- a/src/hooks/useTheme.ts +++ b/src/hooks/useTheme.ts @@ -9,40 +9,37 @@ interface IThemeList { /** 注册的主题名称, 其中 normal 是必填的 */ export type ThemeName = "normal" | "dark" | "dark-blue" +/** 主题列表 */ +const themeList: IThemeList[] = [ + { + title: "默认", + name: "normal" + }, + { + title: "黑暗", + name: "dark" + } +] + +/** 正在应用的主题名称 */ +const activeThemeName = ref(getActiveThemeName() || "normal") + +const initTheme = () => { + setHtmlClassName(activeThemeName.value) +} + +const setTheme = (value: ThemeName) => { + activeThemeName.value = value + setHtmlClassName(activeThemeName.value) + setActiveThemeName(activeThemeName.value) +} + +/** 在 html 根元素上挂载 class */ +const setHtmlClassName = (value: ThemeName) => { + document.documentElement.className = value +} + /** 主题 hook */ export function useTheme() { - /** 主题列表 */ - const themeList: IThemeList[] = [ - { - title: "默认", - name: "normal" - }, - { - title: "黑暗", - name: "dark" - }, - { - title: "深蓝", - name: "dark-blue" - } - ] - /** 正在应用的主题名称 */ - const activeThemeName = ref(getActiveThemeName() || "normal") - - const initTheme = () => { - setHtmlClassName(activeThemeName.value) - } - - const setTheme = (value: ThemeName) => { - activeThemeName.value = value - setHtmlClassName(activeThemeName.value) - setActiveThemeName(activeThemeName.value) - } - - /** 在 html 根元素上挂载 class */ - const setHtmlClassName = (value: ThemeName) => { - document.documentElement.className = value - } - return { themeList, activeThemeName, initTheme, setTheme } }