40 lines
1.1 KiB
Markdown
40 lines
1.1 KiB
Markdown
---
|
||
title: "主题切换"
|
||
type: concept
|
||
tags: [UX, CSS, 用户体验]
|
||
---
|
||
|
||
## 定义
|
||
支持用户选择浅色（Light）、深色（Dark）或跟随系统（System）偏好的界面主题管理机制。
|
||
|
||
## 三种模式
|
||
1. **Light Mode**：浅色背景配深色文字，适合明亮环境
|
||
2. **Dark Mode**：深色背景配浅色文字，适合暗光环境
|
||
3. **System Mode**：自动匹配操作系统偏好设置
|
||
|
||
## 技术实现
|
||
- 使用 CSS 变量存储主题色值
|
||
- 通过 data-theme 属性切换主题
|
||
- 使用 localStorage 持久化用户选择
|
||
- 通过 prefers-color-scheme 媒体查询监听系统偏好
|
||
|
||
## 实现示例
|
||
```javascript
|
||
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 默认要求
|
||
所有新站点必须包含主题切换功能，确保无障碍访问和用户个性化体验。
|
||
|
||
## 相关概念
|
||
- [[CSS 设计系统]] |