45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
|
import { ref } from "vue"
|
||
|
|
import { getActiveThemeName, setActiveThemeName } from "@/utils/cache/localStorage"
|
||
|
|
|
||
|
|
interface IThemeList {
|
||
|
|
title: string
|
||
|
|
name: ThemeName
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 注册的主题名称, 其中 normal 是必填的 */
|
||
|
|
export type ThemeName = "normal" | "dark"
|
||
|
|
|
||
|
|
/** 主题 hook */
|
||
|
|
export function useTheme() {
|
||
|
|
/** 主题列表 */
|
||
|
|
const themeList: IThemeList[] = [
|
||
|
|
{
|
||
|
|
title: "默认",
|
||
|
|
name: "normal"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "黑暗",
|
||
|
|
name: "dark"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
/** 正在应用的主题名称 */
|
||
|
|
const activeThemeName = ref<ThemeName>(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 }
|
||
|
|
}
|