从开发者的日常痛点说起
最近上线了一个用户管理后台,忙得焦头烂额。没想到上线后的用户反馈让我直冒冷汗:“网站晚上用着太刺眼了,能不能加个黑暗模式?”
你是不是也遇到过这种需求?产品经理随口一说,用户随手一提,结果改需求的锅就甩到了开发头上。乍一看,这功能要动前端框架甚至后端逻辑,简直头大。
但别怕!其实不需要动用 JS 大杀器,仅靠 CSS 就能搞定黑暗模式。而且代码简单,效果炸裂,还能秒刷用户好感度!今天就带你用纯 CSS 分分钟实现网站“白天光明、晚上护眼”的黑暗模式。
在开发中,最好的方式就是将复杂功能拆解为小块,我们一起来看下用纯 CSS 实现黑暗模式的具体步骤👇:
假设我们要为一个电商后台的订单管理系统添加黑暗模式。先准备一个简单的 HTML 页面,内容包括标题和一个订单列表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>订单管理后台</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>订单管理系统</h1>
<p>这里显示你的订单列表</p>
<table class="order-table">
<thead>
<tr>
<th>订单号</th>
<th>用户名</th>
<th>金额</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1001</td>
<td>张三</td>
<td>¥150.00</td>
<td>已支付</td>
</tr>
<tr>
<td>#1002</td>
<td>李四</td>
<td>¥300.50</td>
<td>待支付</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这是一个普通后台的基础页面,结构简单清晰,接下来就让 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;
}
}
黑暗模式优化:
虽然光明模式已经是默认样式,但在实际开发中,为了防止其他样式覆盖,可以显式声明光明模式:
/* 光明模式(显式定义) */
@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,让你的页面可以自动适配用户设备的光明和黑暗主题。不仅代码量小,而且兼容性好(支持现代主流浏览器)。
在以下场景中,黑暗模式能显著提升用户体验:
👀 那么问题来了:
欢迎在评论区留言,分享你的经验或提问!我们一起讨论更好的开发技巧吧~ 🎉
Happy Coding! 🌞🌚