使用可选样式表为网站或应用添加黑暗模式

个网站的 CSS 主题。在本教程的剩余部分，我将向你展示如何向你自己的站点添加黑暗模式功能!

如果你能抓取到这篇黑暗模式教程页面使用的可选样式表，那也可以复制到你自己制作的网站上，或者用在你的 Wordpress(或类似的站点构建工具)中。

你可能听说过 CSS 可以是 内联 的，内部 的和 外部 的。这决定了 CSS 包含在你的文档中的方式。但是为了理解可选样式表的概念，我们首先需要看一下……

层叠样式表的 3 种类型

但是，层叠样式表(也就是 CSS)还有其他三种形式。它们分别是 持久 的，首选 的和 可选 的。

持久样式 指的是始终启用的 CSS 样式，并与活动样式表结合在一起。为了指定持久样式表，需要将 rel = "stylesheet" 属性添加到你的 link 标签，并跳过 title 属性。

这就是你指定一个样式表的常规方式。

 

建可选样式表，你要做的就是将 link 标签中的 rel 属性设置为“alternate stylesheet”。就这样即可。这只是第一步。现在我们需要编写一个脚本来切换样式表。

在样式表之间动态切换

我在做相关研究时，在网上发现了不少有些年头的可选样式表 JavaScript 函数。但是它们有点过时了，所以我自己写了一个版本。

最重要的是，你需要在要启用的可选样式表对象上将属性 disabled 设置为

 

切换 CSS 样式表需要的工作来说，到这里就都完成了。但是还有一件事!如果用户在选择其他主题之后离开站点，则需要确保当用户返回时网站加载了他们最后选择的那个主题。这可以使用 cookie 来实现，但是在本教程中，我将使用 HTML5 localStorage 来完成它。

记忆所选主题

我们可以使用 localStorage 来记住用户之前所选择的主题。这里的代码是直截了当的。每次选择主题时，我们都会将其标题名称存储在名为 "theme" 的 localStorage 项目中。下面我们来更新上一步中已经编写好的那个函数：

（编辑：南通站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!