Blog
CSS 深色模式实现完全指南
从 CSS 变量到 prefers-color-scheme，详解现代前端项目深色模式的各种实现方案。
CSS前端教程
方案对比
| 方案 | 复杂度 | 灵活性 | 浏览器兼容 |
|---|---|---|---|
| CSS 变量 + 类名切换 | 低 | 高 | 现代浏览器 |
prefers-color-scheme | 低 | 中 | 现代浏览器 |
| CSS-in-JS 方案 | 中 | 高 | 取决于运行时 |
Tailwind dark: 前缀 | 低 | 高 | 现代浏览器 |
最佳实践：CSS 变量 + 类名切换
这是目前最推荐的方案，结合 next-themes 可以轻松实现：
1. 定义 CSS 变量
:root {
--color-bg: #ffffff;
--color-text: #111827;
}
.dark {
--color-bg: #0f172a;
--color-text: #f1f5f9;
}
2. 使用变量
body {
background-color: var(--color-bg);
color: var(--color-text);
transition: background-color 0.2s, color 0.2s;
}
3. 配合 Tailwind
在 tailwind.config.ts 中启用 class 策略：
// tailwind.config.ts
export default {
darkMode: "class",
// ...
}
关键注意事项
- 避免闪烁（FOIT）：在
<html>标签注入脚本，在页面渲染前读取设置 - 过渡动画：在变量上使用
transition使切换更平滑 - 图片适配：深色模式下可能需要不同的图片资源
- 系统偏好：默认跟随系统，但允许用户手动覆盖
深色模式实现的关键在于设计阶段就考虑好色彩体系，而不是后期硬加上去。
分享到：