使用 CSS 为你的网站添加暗黑模式

使用 CSS 为现有网站添加深色主题非常简单。在本教程中，我们将利用CSS 变量来实现。

我们将提供三种不同的主题选项：自动、浅色和深色。浅色和深色主题的含义不言而喻，但自动主题将使用操作系统主题设置来决定网站是使用浅色还是深色。

虽然我不会向您展示如何进行这种特定的布局或包含内容，但这里有一个我们可以创建的示例：

添加 HTML

让我们从 HTML 开始，您可以将value属性视为每个主题的标识符：

<select id="theme">
    <option value="auto">Auto</option>
    <option value="light">Light</option>
    <option value="dark">Dark</option>
</select>

添加 CSS

现在让我们向元素添加一些 CSS body，在这里您可以使用 CSS 变量为 Light Theme 指定颜色：

body {
    --background-color: #ffffff;
    --text-color: #000000;
}

接下来，您需要在整个样式表中使用 CSS 变量——这是我们解决方案发挥作用的关键。例如，您可以这样做：

.main-content {
    background: var(--background-color);
    color: var(--text-color);
}

button {
    color: var(--text-color);
}

我们将通过简单地替换上面声明的变量的值来实现暗黑主题。让我们添加以下 CSS：

:root {
    --dark-background-color: #111111;
    --dark-text-color: #eeeeee;
}

body.theme-dark {
    --background-color: var(--dark-background-color);
    --text-color: var(dark-text-color);
}

现在，如果你将theme-dark类添加到元素中<body>，你应该会看到深色主题生效了。很快我们会用 JavaScript 来切换这个值，但现在<select>让我们来实现“自动”选项：

@media (prefers-color-scheme: dark) {
    body.theme-auto {
        --background-color: var(--dark-background-color);
        --text-color: var(--dark-text-color);
    }
}

上述 CSS 使用媒体查询来检查操作系统是否喜欢黑暗主题，如果是，我们希望应用嵌套规则集body.theme-auto。

我们基本上是在说“操作系统是否更喜欢黑暗模式，是否<body>有一个类theme-auto？如果是这样，我们就使用黑暗模式。”

通过更改您的操作系统主题颜色来尝试一下，或者更好的是，在启用黑暗模式的情况下在手机上查看网站。

添加 JavaScript

现在我们的 CSS 已经可以正常工作了，我们可以继续让主题选择器下拉菜单正常工作。让我们添加以下 JavaScript：

function applyTheme(theme) {
    document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
    document.body.classList.add(`theme-${theme}`);
}

document.addEventListener("DOMContentLoaded", () => {
   document.querySelector("#theme").addEventListener("change", function() {
        applyTheme(this.value);
   });
});

在这里，我们等待 DOM 准备就绪，以便我们开始使用它。一旦准备就绪，我们就会监听用户在主题选择器下拉菜单中选择一个选项。一旦他们选择了某个选项，我们会从中删除所有现有的主题类<body>（如果有），然后只需使用即可添加所选主题this.value。

更进一步——记住主题

我们可以更进一步，让浏览器记住页面刷新时选择的主题。为此，我们可以使用本地存储

让我们添加以下 JavaScript，最终得到如下内容：

document.addEventListener("DOMContentLoaded", () => {
    const savedTheme = localStorage.getItem("theme") || "auto";

    applyTheme(savedTheme);

    for (const optionElement of document.querySelectorAll("#theme option")) {
        optionElement.selected = savedTheme === optionElement.value;
    }

    document.querySelector("#theme").addEventListener("change", function () {
        localStorage.setItem("theme", this.value);
        applyTheme(this.value);
    });
});

现在，选择主题后，我们使用将其保存到本地存储localStorage.setItem("theme", this.value)。接下来，在页面加载时，我们将之前保存的主题抓取到savedTheme常量中，默认值为auto。获取到常量后，我们只需应用保存的主题即可。

除此之外，我们还会循环遍历每个元素<option>并检查其值是否是我们保存的主题的值，如果是，则选择该选项为“选定”。

要测试它是否有效，请刷新页面，选择一个主题，再次刷新，您的主题就会生效！

视频教程

如果您更喜欢视频教程的形式，请在我的 YouTube 频道 dcode 上查看！

希望你们喜欢这篇文章！这是我的第一篇开发文章，所以如果你们有什么改进建议，请告诉我。

干杯！😁

文章来源：https://dev.to/dcodeyt/add-dark-mode-to-your-websites-with-css-5bh4