为您的网站添加深色模式您是否将此模式添加到您自己的网站？我一直是动态网站颜色主题切换器的忠实粉丝。它们通过允许您选择您喜欢的颜色主题来改善用户体验！例如，下面是在Twitter上显示设置下的颜色主题选项。这次让我们创建类似的东西。也许它不会像Twitter的主题转换器那样花哨，但我们会解释这里将要使用的技术细节，并告诉您如何使用替代样式表（alternatestylesheets）和JavaScript来切换包含在CSS中的主题定义。首先……让我们来看看这篇文章要创造什么样的内容。这是一个切换该站点颜色主题的工作示例：https://www.javascriptteacher.com/dark-mode-alternate-css-style-sheet.html?rtClick各个按钮可立即切换整个站点主题的CSS。在本教程的其余部分，我将向您展示如何向您自己的网站添加暗模式功能！如果你可以获取这个暗模式教程页面使用的可选样式表，也可以复制它来制作你自己的网站，或者在你的Wordpress（或类似的网站构建工具）中使用它。您可能听说过CSS可以是内联的、内部的和外部的。这决定了如何将CSS包含在您的文档中。但是要理解可选样式表的概念，我们首先需要看一下……3种层叠样式表然而，还有其他三种层叠样式表（又名CSS）。它们分别是持久的、首选的和可选的。持久样式是指始终启用并与活动样式表结合的CSS样式。要指定持久样式表，请将rel="stylesheet"属性添加到您的链接标记，跳过title属性。这是您指定样式表的常规方式。可实时切换替代样式，无需重新加载页面即可改变页面主题。rel="alternatestylesheet"/>要创建替代样式表，您所要做的就是将链接标记中的rel属性设置为“替代样式表”。就是这样。这只是第一步。现在我们需要编写一个脚本来切换样式表。在样式表之间动态切换几年来，我一直在做一些研究，并在网络上发现了相当多的可选样式表JavaScript函数。但是他们有点过时了，所以我自己写了一个版本。最重要的是，您需要在要启用的可选样式表对象上将属性disabled设置为false。functionsetActiveStyleSheet(title){letcss=`link[rel="alternatestylesheet"]`;letstylesheets=document.querySelectorAll(css);stylesheets.forEach(sheet=>sheet.disabled=true);letselector=`link[title="${title}"]`;letstylesheet=document.querySelector(selector);stylesheet.disabled=false;要动态切换到新样式表，首先必须禁用所有可用的可选样式表。如果您不这样做，您会发现您的可选样式表不起作用（无法切换）。因此，在这个函数的第一步中，我们禁用所有可用的可选样式表。完成后，我们启用标题参数中指定的那个。letDarkModeButton=document.getElementById("DarkModeButton");DarkModeButton.addEventListener("click",event=>setActiveStyleSheet("darkmode"));您可以附加setActiveStyleSheet函数作为回调，负责在按钮的“单击”事件上切换它。请注意，上面的示例假设我们有一个带有title="darkmode"的样式表。或者，也可以直接在元素上使用onclick属性：.但还有一件事！如果用户在选择不同的主题后离开网站，您需要确保当用户返回时网站加载他们上次选择的主题。这可以使用cookie来实现，但在本教程中，我将使用HTML5localStorage来完成。记住选择的主题我们可以使用localStorage来记住用户之前选择的主题。这里的代码很简单。每次选择主题时，我们都会将其标题名称存储在名为“theme”的localStorage项中。让我们更新上一步中已经写好的函数：sheet=>sheet.disabled=true);letselector=`link[title="${title}"]`;letstylesheet=document.querySelector(selector);stylesheet.disabled=false;localStorage.setItem("主题",title);}请注意，我们在这里添加了一个新的localStorage调用。现在，每次切换到可选样式表时，它都会存储在关键字“主题”下。现在，如果用户离开站点并再次进入（关闭浏览器选项卡后），我们需要恢复保存在localStorage中的默认主题。为此，我们需要从DOMContentLoaded事件（在DOM加载后不久）读取本地存储，并使用存储在主题项中的值来选择样式表：window.addEventListener('DOMContentLoaded',(event)=>{console.log('DOMfullyloadedandparsed');lettitle=localStorage.getItem("theme");setActiveStylesheet(title);})就是这样！现在，您有一个完整的可选CSS主题的主题选择器。当然，比较难的部分是做出漂亮的CSS布局，不过这部分内容会在下一个教程中详细讲解！
