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

分享到

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

html5 来源：互联网搜集作者：秩名发布时间：2020-04-07 21:51:35 人浏览

摘要

为你的站点添加黑暗模式黑暗模式已经应用在了许多流行的网站和应用程序中，诸如 Twitter、Instagram、WhatsApp 和 YouTube 等。但是你该怎样在自己的网站上添加这种模式呢? 我一直非常喜欢动态的网站颜色主题切换器。它们可以让你选择自己喜欢的颜色主题，

为你的站点添加黑暗模式

黑暗模式已经应用在了许多流行的网站和应用程序中，诸如 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"));

你可以将 setActiveStyleSheet 函数作为回调附加到负责切换它的按钮的“click”事件上。请注意，上面的示例假设我们有一个 title = "darkmode" 的样式表。或者，你可以直接在元素上直接使用 onclick 属性即可：

				?

									<div id = "DarkModeButton"

									onclick = "setActiveStyleSheet('darkmode')">

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

记忆所选主题

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

				?

									<!-- 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; 

									    localStorage.setItem("theme", title); 

									}

请注意，这里我们添加了一个新的 localStorage 调用。现在，每次切换到一个可选样式表上时，它将存储在关键字 "theme" 下。

现在，如果用户离开站点并(在关闭浏览器选项卡之后)再次进入站点，我们需要恢复保存在 localStorage 中的默认主题。

为了做到这一点，我们需要从 DOMContentLoaded 事件上读取本地存储(时间就在 DOM 加载完毕之后不久)，并使用存储在主题项目中的值来选择样式表：

				?

									<!-- Switch to a named alternate stylesheet --> 

									window.addEventListener('DOMContentLoaded', (event) => { 

									    console.log('DOM fully loaded and parsed'); 

									    let title = localStorage.getItem("theme"); 

									    setActiveStylesheet(title); 

									})

这样就搞定啦!现在，你有了一个完整的，可选 CSS 主题的主题选择器。当然比较困难的部分是制作一套漂亮的 CSS 布局，但这块内容就等下一篇教程来具体讲解吧!

您可能感兴趣的文章 :

原文链接 : https://www.jb51.net/html5/719304.html

Tag : html5(143)黑暗模式(2)

html5+实现plus.io进行拍照和图片等获取

使用Hbuilder开发工具开发：实现可对Android机进行控制和获取资源说明：IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取
HTML标签实现带动画的抖音LOGO效果

先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了解它的构造，一定是一些几何图形
video.js支持m3u8格式直播的实现教程

为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生
html5调用摄像头截图功能的介绍

关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，
前端监听websocket消息并实时弹出的代码实例介绍

本文默认您已掌握react生态开发的相关技术，并熟练应用umiJS的原则上，请继续！项目需求： 1、服务侧推送给消息给前端，前端需要展示在
HTML5新增内容和API介绍

classList 属性该属性用于在元素中添加，移除及切换 CSS 类。 classList属性返回元素的类名，作为 DOMTokenList 对象： div id=div class=test1 test2clas
使用canvas仿Echarts实现金字塔图的教程

最近公司项目都偏向于数字化大屏展示????，而这次发给我的项目原型中出现了一个金字塔图?????，好巧不巧，由于我们的图表都是使用Ech
基于HTML十秒做出淘宝页面的方法

十秒钟做出一个网页，可能大家看完会觉得有点标题党，其实不然，把别人的抠过来还是可以的比如我这次先把淘宝的网页扣过来为例第一
HTML5+CSS+JavaScript实现捉虫小游戏的代码

捉虫小游戏首页展示：选择昆虫：效果展示：有密集恐惧症的别玩哟、游戏永远不会停止一直玩项目源码结构：图片和js以及css等基础
Canvas绘制像素风图片的代码

童年玩红白机。尤其国内的小霸王那段时光还记得么。那个马里奥大叔还记得么。因为特别喜欢像素风的游戏从小到大一直都是，像素风本