如何只使用 CSS 实现网站的暗黑模式切换-51CTO.COM

想让你的网站从“明亮清新”切换到“暗黑酷炫”，而不依赖任何 JavaScript？没问题！

仅用 CSS 就能完成这个任务，根据用户设备的系统设置动态切换主题。本教程将教你如何实现一个可以随系统设置自动切换明暗模式的网站，完全抛弃 JavaScript。

第一步：基础 HTML 页面结构

首先，我们需要一个简单的 HTML 页面来进行实践，为后续的样式处理打下基础。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 实现暗黑模式 🌙</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>欢迎来到暗黑模式的世界！</h1>
        <p>本网站会根据设备主题自动切换模式。试着设置为暗黑模式，感受一下效果吧！</p>
    </div>
</body>
</html>

这是一个简单的 HTML 页面，现在我们用 CSS 为它赋予灵魂。

第二步：设置默认的明亮主题样式

我们先在 styles.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: 600px;
    margin: 50px auto;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

样式解析

背景与文字：白色背景配合黑色文字，经典又舒适的搭配。
平滑过渡：通过 transition 属性，让明暗模式切换更加流畅。
容器样式：设置了居中、圆角和柔和的阴影，使页面更加美观。

第三步：通过 @media (prefers-color-scheme: dark) 添加暗黑模式

接下来，我们利用 CSS 的 @media 媒体查询，根据系统是否开启暗黑模式切换样式。

/* 暗黑模式样式 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212; /* 深灰背景，低调且不刺眼 */
        color: #e0e0e0; /* 柔和的白色文字，避免高对比度 */
    }

    .container {
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); /* 更柔和的阴影 */
    }
}

样式解析

媒体查询：@media (prefers-color-scheme: dark) 会检测用户系统是否设置为暗黑模式。
暗黑主题：采用深灰背景和柔和的浅灰文字，避免刺眼的纯黑与纯白对比。
容器阴影：将阴影颜色调整为浅色，更贴合暗黑背景的视觉效果。

第四步：显式定义明亮模式（可选）

虽然明亮模式是默认样式，但你也可以显式定义它，这在需要覆盖某些样式时非常有用。

/* 明亮模式样式 */
@media (prefers-color-scheme: light) {
    body {
        background-color: #ffffff;
        color: #000000;
    }

    .container {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}

第五步：完整 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: 600px;
    margin: 50px auto;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 暗黑模式样式 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #e0e0e0;
    }

    .container {
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
    }
}

/* 明亮模式样式 */
@media (prefers-color-scheme: light) {
    body {
        background-color: #ffffff;
        color: #000000;
    }

    .container {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}

总结：纯 CSS 的强大之处

通过仅仅几行 CSS 代码，你的网站现在可以根据用户的系统设置自动切换明暗模式。无需 JavaScript，纯粹依赖 CSS 的特性，让页面变得更智能，更贴合用户习惯。

这个方法不仅提升了用户体验，还减少了页面加载的复杂度和资源消耗。现在，你可以自信地为用户提供一个现代、灵活的主题切换体验。