CSS 如何实现暗黑模式切换？

Question

CSS 如何实现暗黑模式切换？

仓乃文 · Accepted Answer

暗黑模式有三种实现方式：CSS 变量 + class 切换、媒体查询跟随系统、两者结合。推荐使用 CSS 变量方案，灵活性最好。

方案一：CSS 变量 + class 切换（推荐手动切换）：
```css
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}
.dark {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}
body {
  background: var(--bg-color);
  color: var(--text-color);
}
```

方案二：媒体查询跟随系统：
```css
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}
```

方案三：同时支持系统和手动切换（最佳实践）：
```css
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}
```

补充说明：
- CSS 变量是实现主题切换的最佳方式，改一处全站生效
- 媒体查询只能跟随系统，无法手动切换
- color-scheme 属性影响表单等原生组件的色彩方案
- 最佳实践是优先检测系统偏好，再允许用户覆盖