Simon
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
// =============================================================================
|
|
// 企微IT智能服务台 — 主题切换 composable
|
|
// =============================================================================
|
|
// 说明：提供浅色/深色主题切换功能
|
|
// 核心功能：
|
|
// 1. applyTheme(theme) — 设置 document.documentElement data-theme + localStorage
|
|
// 2. getInitialTheme() — 从 localStorage 读取，默认 'light'
|
|
// 3. 初始化时自动调用 applyTheme
|
|
// =============================================================================
|
|
|
|
/** 主题类型 */
|
|
export type ThemeMode = 'light' | 'dark'
|
|
|
|
/** localStorage 存储键 */
|
|
const THEME_STORAGE_KEY = 'it_desk_theme'
|
|
|
|
/**
|
|
* 应用主题到 DOM
|
|
* 设置 document.documentElement 的 data-theme 属性，并持久化到 localStorage
|
|
*
|
|
* @param theme - 目标主题 ('light' | 'dark')
|
|
*/
|
|
export function applyTheme(theme: ThemeMode): void {
|
|
document.documentElement.setAttribute('data-theme', theme)
|
|
localStorage.setItem(THEME_STORAGE_KEY, theme)
|
|
}
|
|
|
|
/**
|
|
* 获取初始主题
|
|
* 从 localStorage 读取已保存的主题偏好，默认返回 'light'
|
|
*
|
|
* @returns 当前主题模式
|
|
*/
|
|
export function getInitialTheme(): ThemeMode {
|
|
const saved = localStorage.getItem(THEME_STORAGE_KEY)
|
|
if (saved === 'dark' || saved === 'light') {
|
|
return saved
|
|
}
|
|
// 检测系统偏好
|
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
return 'dark'
|
|
}
|
|
return 'light'
|
|
}
|
|
|
|
/**
|
|
* 主题切换 composable
|
|
* 封装主题切换逻辑，初始化时自动应用已保存的主题
|
|
*
|
|
* @returns { applyTheme, getInitialTheme }
|
|
*/
|
|
export function useTheme() {
|
|
// 初始化时立即应用已保存的主题
|
|
const initialTheme = getInitialTheme()
|
|
applyTheme(initialTheme)
|
|
|
|
return {
|
|
applyTheme,
|
|
getInitialTheme,
|
|
}
|
|
}
|