开发者必备！用纯 CSS 搞定网站黑暗模式

前端达人

发布于 2025-01-09 18:56:50

490

文章被收录于专栏：前端达人

从开发者的日常痛点说起

最近上线了一个用户管理后台，忙得焦头烂额。没想到上线后的用户反馈让我直冒冷汗：“网站晚上用着太刺眼了，能不能加个黑暗模式？”

你是不是也遇到过这种需求？产品经理随口一说，用户随手一提，结果改需求的锅就甩到了开发头上。乍一看，这功能要动前端框架甚至后端逻辑，简直头大。

但别怕！其实不需要动用 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;
    }
}

黑暗模式优化：

深灰背景：#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 { ... }
}