如何使用可选样式表为网站或应用添加黑暗模式
为你的站点添加黑暗模式
黑暗模式 已经应用在了许多流行的网站和应用程序中，诸如 Twitter、Instagram、WhatsApp 和 YouTube 等。但是你该怎样在自己的网站上添加这种模式呢?
我一直非常喜欢动态的网站颜色主题切换器。它们可以让你选择自己喜欢的颜色主题，从而改善了用户体验!
例如，下面是在 Twitter 的“显示设置”下找到的颜色主题选项。
这次就让我们来创建与之类似的功能吧。也许它不会像 Twitter 的主题更改器那么高大上，但我们会讲明白这里会用到的技术细节，告诉大家如何使用可选样式表(alternate style sheets)和 JavaScript 来切换 CSS 所包含的主题定义。
首先……我们来看一下这篇文章要创建出什么样的内容。
下面是一个可以切换本网站颜色主题的运行示例：
https://www.javascriptteacher.com/dark-mode-alternate-css-style-sheet.html?rt
单击各个按钮就可以立即切换整个网站的 CSS 主题。在本教程的剩余部分，我将向你展示如何向你自己的站点添加黑暗模式功能!
如果你能抓取到这篇黑暗模式教程页面使用的可选样式表，那也可以复制到你自己制作的网站上，或者用在你的 Wordpress(或类似的站点构建工具)中。
你可能听说过 CSS 可以是 内联 的，内部 的和 外部 的。这决定了 CSS 包含在你的文档中的方式。但是为了理解可选样式表的概念，我们首先需要看一下……
层叠样式表的 3 种类型
但是，层叠样式表(也就是 CSS)还有其他三种形式。它们分别是 持久 的，首选 的和 可选 的。
持久样式 指的是始终启用的 CSS 样式，并与活动样式表结合在一起。为了指定持久样式表，需要将 rel = "stylesheet" 属性添加到你的 link 标签，并跳过 title 属性。
这就是你指定一个样式表的常规方式。
<!-- Persistent Style Sheet --> <link src = "style.css" rel = "stylesheet"
首选样式 是页面加载完成后启用的默认样式。要创建它，请向你的 CSS link 标签添加 title 属性。
<!-- Alternate Style Sheet (just add a title) --> <link src = "dark.css" rel = "stylesheet" title = "dark" />
可选样式 可以实时切换来更改页面主题，而无需重新加载页面。
<!-- Dark Mode Alternate Style Sheet --> <link src = "dark.css" title = "dark" /> rel = "alternate stylesheet" /> <!-- Light Mode Alternate Style Sheet --> <link src = "light.css" title = "light" rel = "alternate stylesheet" />
为了创建可选样式表，你要做的就是将 link 标签中的 rel 属性设置为“alternate stylesheet”。就这样即可。这只是第一步。现在我们需要编写一个脚本来切换样式表。
在样式表之间动态切换
我在做相关研究时，在网上发现了不少有些年头的可选样式表 JavaScript 函数。但是它们有点过时了，所以我自己写了一个版本。
最重要的是，你需要在要启用的可选样式表对象上将属性 disabled 设置为 false。
<!-- Switch to a named alternate stylesheet -->
function setActiveStyleSheet(title) {
let css = `link[rel="alternate stylesheet"]`;
let stylesheets = document.querySelectorAll(css);
stylesheets.forEach(sheet => sheet.disabled = true);
let selector = `link[title="${title}"]`;
let stylesheet = document.querySelector(selector);
stylesheet.disabled = false; 要动态切换到新样式表上，首先你必须禁用所有可用的可选样式表。如果你没能做到这一点，则会发现你的可选样式表不起作用(无法切换)。因此，在这个函数的第一步中，我们禁用了所有可用的可选样式表。完成后，我们启用了 title 参数中指定的那个。
<!-- Attach event to a button -->
let DarkModeButton = document.getElementById("DarkModeButton");
DarkModeButton.addEventListener("click",
event => setActiveStyleSheet("darkmode"));