从开发者的日常痛点说起
最近上线了一个用户管理后台，忙得焦头烂额。没想到上线后的用户反馈让我直冒冷汗：“网站晚上用着太刺眼了，能不能加个黑暗模式？”
你是不是也遇到过这种需求？产品经理随口一说，用户随手一提，结果改需求的锅就甩到了开发头上。乍一看，这功能要动前端框架甚至后端逻辑，简直头大。
但别怕！其实不需要动用 JS 大杀器，仅靠 CSS 就能搞定黑暗模式。而且代码简单，效果炸裂，还能秒刷用户好感度！今天就带你用纯 CSS 分分钟实现网站“白天光明、晚上护眼”的黑暗模式。
在开发中，最好的方式就是将复杂功能拆解为小块，我们一起来看下用纯 CSS 实现黑暗模式的具体步骤：
第一步：模拟业务场景 - 一个订单管理后台
假设我们要为一个电商后台的订单管理系统添加黑暗模式。先准备一个简单的 HTML 页面，内容包括标题和一个订单列表：
订单管理后台
订单管理系统
这里显示你的订单列表
订单号
用户名
金额
状态
#1001
张三
￥150.00
已支付
#1002
李四
￥300.50
待支付
这是一个普通后台的基础页面，结构简单清晰，接下来就让 CSS 为它“点亮”光明与黑暗！
第二步：光明模式 - 默认样式
默认情况下，用户使用的大多是“光明模式”。我们先为这个界面定义一个清爽的默认样式：
/* 默认光明模式样式 */
body {
background-color: #ffffff;
color: #000000;
font-family: Arial, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.order-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.order-table th, .order-table td {
padding: 12px;
border: 1px solid #ddd;
text-align: left;
}
.order-table th {
background-color: #f4f4f4;
font-weight: bold;
}亮点分析：
- 白色背景 + 黑色文字：光明模式的经典搭配，清新明快。
- 平滑过渡：通过 transition 属性，保证模式切换时视觉效果更流畅。
- 表格样式：用灰色表头和边框区分内容，整体观感更专业。
第三步：黑暗模式 - 一键适配
有了光明模式，接下来让 CSS 黑暗模式“自觉”上线！借助 @media (prefers-color-scheme: dark)，我们可以让浏览器自动检测用户的系统设置，并为其加载深色主题：
/* 黑暗模式样式 */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
.container {
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}
.order-table th {
background-color: #333333;
}
.order-table td {
border-color: #444444;
}
}黑暗模式优化：
- 深灰背景：#121212 的灰色比纯黑更护眼，细腻而不过分强烈。
- 柔白文字：避免用纯白文字，#e0e0e0 更舒适。
- 表格配色调整：将边框和表头背景换为深灰，整体风格一致。
第四步：明确定义光明模式
虽然光明模式已经是默认样式，但在实际开发中，为了防止其他样式覆盖，可以显式声明光明模式：
/* 光明模式（显式定义） */
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #000000;
}
.order-table th {
background-color: #f4f4f4;
}
}这样一来，光明和黑暗模式都得到了清晰的定义。
完整代码实现
将所有代码整合后，你的 CSS 文件如下：
/* 默认光明模式 */
body { ... }
.container { ... }
.order-table { ... }
/* 黑暗模式 */
@media (prefers-color-scheme: dark) {
body { ... }
.container { ... }
.order-table { ... }
}
/* 光明模式（显式定义） */
@media (prefers-color-scheme: light) {
body { ... }
.order-table { ... }
}总结
这次实现的黑暗模式，不需要一行 JS，只需几行 CSS，让你的页面可以自动适配用户设备的光明和黑暗主题。不仅代码量小，而且兼容性好（支持现代主流浏览器）。
你对黑暗模式怎么看？
在以下场景中，黑暗模式能显著提升用户体验：
- 后台管理系统：开发者和运营人员长时间使用后台时更护眼。
- 夜间阅读网站：如博客、新闻网站，降低视觉疲劳。
- 设备省电：OLED 屏幕在深色模式下更省电。
那么问题来了：
- 你觉得黑暗模式对提升用户体验是否有帮助？
- 在你的项目中，有没有用过类似的黑暗模式？如何实现的？