---
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 设计系统]]