只需几行代码就可以在网站上添加暗模式

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

在这个简短的教程中，我们将学习如何以不同的方式在您的网站中添加对黑暗模式的支持：首先是使用CSS，最后是使用 JavaScript构建的切换。

1.使用CSS添加暗模式支持

如果你不想对黑暗模式过于着迷，只想让你的网站改变调色板，如果用户使用的浏览器启用了黑暗模式，CSS 就足够了。

在 CSS 文件中，编写以下媒体查询：

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

使用此媒体查询，我们可以定义一组自定义样式，以便在用户启用暗模式浏览时应用。
根据 CanIUse.com 的数据，支持率在78%左右，不包括 Internet Explorer 和 Edge（而不是 Edge Chromium ）。
如果您不在企业软件上工作，而您真的需要担心用户仍在使用 InternetExplorer ，我认为这个媒体查询可以很好地工作。
这种方法的缺点是你的用户无法控制他们想如何查看你的网站，所以我只在你没有时间或不想实现切换的情况下才会考虑。

2.用JavaScript切换黑暗模式

现在让我们更进一步，使用JavaScript实现黑暗模式的切换。
要做到这一点，您需要创建两个不同的样式表，每个主题一个（浅色和深色）。如果需要，可以创建第三个样式表，其中包含与主题无关的样式。
第一步是在 html 的头部定义一个默认的主题样式表，如下所示：

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

我们现在要做的是创建一个按钮，用另一个按钮交换样式表。
继续创建一个按钮，如下所示，并把它放在任何你喜欢的地方，最好是在页面的顶部，以便用户更快地访问。

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

现在我们有了一个简单的按钮，让我们添加一些 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';

        }
    })
})

这段代码只是在我们的按钮中添加了一个事件监听器，这样每当我们单击它时，它就会查看样式表的 href 并在黑暗和光明之间切换。我们还改变了按钮本身的文本，以反映主题的变化。
您可以随意使用按钮本身并定义一些整洁的图标，以便更好地区分暗主题和光主题。
如果您尝试上面的代码，您将看到，当您单击按钮时，样式表会更改，但有一个问题。
你能猜出是什么问题吗？
如果你认为下一次用户返回网站时，他们将不得不再次单击按钮来再次切换主题，那么你猜对了。
目前用户的选择没有保存在任何地方，所以一旦他们离开网站，回来，他们将不得不再次切换主题。
幸运的是，有一个快速的方法可以让我们克服这个问题，那就是本地存储。

在本地存储中保存用户的首选项

顾名思义，设置为首选项的主题颜色将存储在浏览器的本地，因此，如果用户更改浏览器或设备，他们将失去对主题的选择，但大多数情况下，他们可能会使用相同的设备返回到您的站点，因此这是存储他们首选项的快速有效方法。
LocalStorage 可以存储键值对，我们可以这样使用它：

localStorage.setItem('theme', 'dark-theme.css');

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

// 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)  
    })
})

正如您在上面的代码中看到的，在页面加载时，我们通过使用 localStorage.getItem（'theme' ） 检查 localStorage 中是否存储了主题首选项。
如果我们找到了什么，我们就马上应用它，恢复用户的偏好。
我还更新了单击按钮时运行的代码，包括此行 localStorage.setItem（'theme'，themeStylesheet.ref） 来存储用户选择。
现在我们有了一个功能齐全的明暗主题切换，可以记住用户的选择，大大改善用户体验。
最棒的是这只花了10分钟！
记住，你不局限于一个暗光主题，你可以有你想要的，你甚至可以得到他们的幻想。
关于 localStorage 的最后几句话：它现在的支持率已经超过93%，因此您可以放心地使用它，而不必太担心传统浏览器，因为即使在IE8-9-10上也支持它！。
另一种快速存储用户首选项（ localStorage 除外）的方法是 sessionStorage ，顾名思义，它只在当前会话中持续存在，直到浏览器会话处于活动状态，这不适合我们的情况。
关于 localStorage 和 sessionStorage ，需要知道的一点是，它们都遵循相同的源策略，这意味着如果您通过 Http 和 Https 访问您的网站，则通过 Https 选择的主题不会反映在 Http 上。
如果你开始想知道为什么你的偏好没有被保存下来，知道这个小小的警告可以帮助你避免花半个小时去猜测是什么问题。

Update：实现相同结果的另一种方法，但是只使用一个样式表，就是在主体上切换一个全局类。
将此添加到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');
}

您的css将如下所示：

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

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