Auto-sync: 2026-04-20 07:08

wiki/concepts/主题切换.md

@@ -0,0 +1,40 @@
+---
+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 设计系统]]