只需几行代码即可为您的网站添加暗黑模式

2025-05-25

只需几行代码即可为您的网站添加暗黑模式

本文最初发布在我的博客上。更多文章和教程请访问inspiredwebdev.com。查看我在Educative上的JavaScript 课程，学习从 ES6 到 ES2019 的所有内容。

 

大家好，我是 Alberto Montalesi，一位自学成才的全栈开发者。我在我的网站inspiredwebdev.com上创建实用的 JavaScript 教程和课程，旨在激励其他开发者成长，并打造他们理想的职业。

黑暗模式在去年变得非常流行，现在所有流行的应用程序都提供了打开该模式的开关。

在这个简短的教程中，我们将研究如何以不同的方式在您的网站中添加对暗模式的支持：首先使用 just CSS，最后使用内置的切换JavaScript。

 

使用 CSS 添加暗黑模式支持

如果您不想对黑暗模式过于花哨，而只是希望您的网站在用户使用启用了黑暗模式的浏览器时更改调色板，那么CSS这对您来说就足够了。

在您的文件中CSS，写入以下媒体查询：

@media (prefers-color-scheme: dark) {
    /* all your styles for dark mode here */
}
Enter fullscreen mode Exit fullscreen mode

通过此媒体查询，我们可以定义一组自定义样式，在用户启用暗模式浏览时应用。

根据CanIUse.com 的数据，支持率约为 78%，不包括 Internet Explorer 和 Edge（不是 Edge Chromium）。

如果您没有开发企业软件，而您又真的需要担心用户仍在使用 Internet Explorer，那么我认为这种媒体查询可以很好地发挥作用。

这种方法的缺点是，您的用户无法控制他们想要如何查看您的网站，因此，只有当您没有时间或不想实现切换时，我才会考虑它。

 

使用 JavaScript 切换暗模式

现在让我们更进一步，使用 实现暗模式的切换JavaScript。

为此，您需要创建两个不同的样式表，分别用于每个主题（浅色和深色）。如果需要，您可以创建第三个样式表，其中包含与主题无关的样式。

第一步是在head我们的html主题中定义一个默认主题样式表，如下所示：

<link id="theme" rel="stylesheet" type="text/css" href="light-theme.css" />
Enter fullscreen mode Exit fullscreen mode

我们现在要做的是创建一个按钮来将该样式表与另一个样式表交换。

继续创建如下所示的按钮并将其放在您喜欢的任何位置，最好放在页面顶部，以便用户更快地访问。

<button id="theme-toggle">Switch to dark mode</button>
Enter fullscreen mode Exit fullscreen mode

现在我们有了一个简单的按钮，让我们添加一些JavaScript内容。
打开JavaScript文件并编写以下代码行：

// this one is jut to wait for the page to load
document.addEventListener('DOMContentLoaded', () => {

    const themeStylesheet = document.getElementById('theme');
    const themeToggle = document.getElementById('theme-toggle');
    themeToggle.addEventListener('click', () => {
        // if it's light -> go dark
        if(themeStylesheet.href.includes('light')){
            themeStylesheet.href = 'dark-theme.css';
            themeToggle.innerText = 'Switch to light mode';
        } else {
            // if it's dark -> go light
            themeStylesheet.href = 'light-theme.css';
            themeToggle.innerText = 'Switch to dark mode';

        }
    })
})
Enter fullscreen mode Exit fullscreen mode

这段代码只是简单地为我们的按钮添加了一个事件监听器，button这样每次我们点击按钮时，它都会查看href样式表，并在暗色和亮色之间切换。我们还会更改按钮本身的文本，以反映主题的变化。

您可以尝试使用按钮本身并定义一些整洁的图标，以更好地区分深色和浅色主题。

如果您尝试上述代码，您将看到当您单击按钮时样式表会发生变化，但存在一个问题。

你能猜出问题是什么吗？

如果您认为用户下次返回网站时必须再次单击按钮才能再次切换主题，那么您猜对了。

目前，用户的选择没有保存在任何地方，因此一旦他们离开网站并返回，他们将不得不再次切换主题。

幸运的是，有一种快速的方法可以让我们克服这个问题，那就是LocalStorage。

 

在 localStorage 中保存用户的偏好设置

顾名思义，设置的偏好设置将本地存储在您的浏览器上，因此如果您的用户更换浏览器或设备，他们将失去主题选择，但大多数情况下他们可能会使用相同的设备返回您的网站，因此这是一种快速有效的存储他们偏好的方法。

LocalStorage可以存储键值对，我们可以像这样使用它：

localStorage.setItem('theme', 'dark-theme.css');
Enter fullscreen mode Exit fullscreen mode

让我们继续将其添加到我们之前的代码中：

// this one is jut to wait for the page to load
document.addEventListener('DOMContentLoaded', () => {

    const themeStylesheet = document.getElementById('theme');
    const storedTheme = localStorage.getItem('theme');
    if(storedTheme){
        themeStylesheet.href = storedTheme;
    }
    const themeToggle = document.getElementById('theme-toggle');
    themeToggle.addEventListener('click', () => {
        // if it's light -> go dark
        if(themeStylesheet.href.includes('light')){
            themeStylesheet.href = 'dark-theme.css';
            themeToggle.innerText = 'Switch to light mode';
        } else {
            // if it's dark -> go light
            themeStylesheet.href = 'light-theme.css';
            themeToggle.innerText = 'Switch to dark mode';
        }
        // save the preference to localStorage
        localStorage.setItem('theme',themeStylesheet.href)  
    })
})
Enter fullscreen mode Exit fullscreen mode

正如您在上面的代码中看到的，在页面加载时，我们会检查localStorage中是否存储了主题偏好设置localStorage.getItem('theme')。

如果我们发现什么，我们就会立即应用它，恢复用户的偏好。

我还更新了单击按钮时运行的代码，包括此行localStorage.setItem('theme',themeStylesheet.href)用于存储用户选择。

现在我们有一个功能齐全的明暗主题切换，它会记住用户的选择，大大改善用户体验。

最棒的是，这仅需 10 分钟即可完成！

请记住，您并不局限于深色和浅色主题，您可以拥有任意数量的主题，甚至可以使用它们来增添趣味。

关于 localStorage 的最后几句话：它的支持率现在已超过 93%，因此您可以放心使用它，而不必过于担心旧版浏览器，因为它甚至在 IE8-9-10 上也受支持！

除了 localStorage 之外，另一种快速存储用户偏好的方法是sessionStorage，顾名思义，它仅在当前会话中持续存在，直到浏览器会话处于活动状态，这不太适合我们的案例场景。

关于 localStorage 和 sessionStorage 需要了解的一件事是，它们都遵循同源策略，这意味着如果您通过 Http 和 Https 访问您的网站，那么您通过 https 所选择的主题将不会反映在 Http 上。

如果您开始疑惑为什么您的偏好没有被保存，了解这个小警告可以帮助您避免花费半个小时来猜测问题所在。

更新：实现相同结果的另一种方法，但只使用一个样式表，就是在 上切换一个全局类body。

将此添加到您的JavaScript

button.addEventListener('click', () => {
    document.body.classList.toggle('dark');
    localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
});

if (localStorage.getItem('theme') === 'dark') {
    document.body.classList.add('dark');
}
Enter fullscreen mode Exit fullscreen mode

您的css遗嘱如下所示：

/* Light mode */
body {
  background: #fff;
  color: #000;
}

/* Dark mode */
body.dark {
  background: #000;
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

编辑：感谢Thomas和Taufik 的更正和编辑。

非常感谢你的阅读。欢迎在DevTo、我的博客inspiredwebdev或Twitter上关注我。访问Educative.io获取交互式编程课程。

免责声明：亚马逊和 Educative 的链接为联盟链接，您的购买将为我带来额外佣金。谢谢


书籍横幅

在Amazon和Leanpub上获取我的电子书

文章来源：https://dev.to/albertomontalesi/add-dark-mode-to-your-website-with-just-a-few-lines-of-code-5baf
Devto 翻译
PREV
远程工作网站 [2022 年更新]
NEXT
通过玩游戏学习 CSS - 没有噩梦