1.1 KiB
1.1 KiB
title, type, tags
| title | type | tags | |||
|---|---|---|---|---|---|
| 主题切换 | concept |
|
定义
支持用户选择浅色（Light）、深色（Dark）或跟随系统（System）偏好的界面主题管理机制。
三种模式
- Light Mode：浅色背景配深色文字，适合明亮环境
- Dark Mode：深色背景配浅色文字，适合暗光环境
- System Mode：自动匹配操作系统偏好设置
技术实现
- 使用 CSS 变量存储主题色值
- 通过 data-theme 属性切换主题
- 使用 localStorage 持久化用户选择
- 通过 prefers-color-scheme 媒体查询监听系统偏好
实现示例
class ThemeManager {
applyTheme(theme) {
if (theme === 'system') {
document.documentElement.removeAttribute('data-theme');
localStorage.removeItem('theme');
} else {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
}
}
UX Architect 默认要求
所有新站点必须包含主题切换功能，确保无障碍访问和用户个性化体验。