Files
WeChatDataAnalysis/frontend/lib/ui-theme.js
T
2977094657 94ec5c9a1c feat(ui): 新增浅深色主题切换并统一界面配色
- 新增主题 store 与本地持久化能力,支持侧边栏切换浅色/深色模式
- 将聊天页、会话列表、标题栏、弹窗等配色改为 CSS 变量统一管理
- 适配定位卡片、引用气泡、系统提示等聊天消息组件在不同主题下的可读性
- 同步整理首页、解密页、联系人页、朋友圈页等页面背景与交互样式
2026-03-22 15:34:05 +08:00

37 lines
1.2 KiB
JavaScript

export const UI_THEME_KEY = 'ui.theme'
export const UI_THEME_LIGHT = 'light'
export const UI_THEME_DARK = 'dark'
export const normalizeUiTheme = (value, fallback = UI_THEME_LIGHT) => {
const normalized = String(value || '').trim().toLowerCase()
if (normalized === UI_THEME_DARK) return UI_THEME_DARK
if (normalized === UI_THEME_LIGHT) return UI_THEME_LIGHT
return fallback === UI_THEME_DARK ? UI_THEME_DARK : UI_THEME_LIGHT
}
export const readUiTheme = (fallback = UI_THEME_LIGHT) => {
if (!process.client) return normalizeUiTheme(fallback)
try {
const raw = localStorage.getItem(UI_THEME_KEY)
return normalizeUiTheme(raw, fallback)
} catch {
return normalizeUiTheme(fallback)
}
}
export const writeUiTheme = (theme) => {
if (!process.client) return
try {
localStorage.setItem(UI_THEME_KEY, normalizeUiTheme(theme))
} catch {}
}
export const applyUiTheme = (theme) => {
if (!process.client || typeof document === 'undefined') return
const normalized = normalizeUiTheme(theme)
const root = document.documentElement
root.dataset.theme = normalized
root.classList.toggle('theme-dark', normalized === UI_THEME_DARK)
root.style.colorScheme = normalized === UI_THEME_DARK ? 'dark' : 'light'
}