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


Posted in HTML / CSS onApril 07, 2020

为你的站点添加黑暗模式

黑暗模式 已经应用在了许多流行的网站和应用程序中,诸如 Twitter、Instagram、WhatsApp 和 YouTube 等。但是你该怎样在自己的网站上添加这种模式呢?

我一直非常喜欢动态的网站颜色主题切换器。它们可以让你选择自己喜欢的颜色主题,从而改善了用户体验!

例如,下面是在 Twitter 的“显示设置”下找到的颜色主题选项。

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

这次就让我们来创建与之类似的功能吧。也许它不会像 Twitter 的主题更改器那么高大上,但我们会讲明白这里会用到的技术细节,告诉大家如何使用可选样式表(alternate style sheets)和 JavaScript 来切换 CSS 所包含的主题定义。

首先……我们来看一下这篇文章要创建出什么样的内容。

下面是一个可以切换本网站颜色主题的运行示例:

https://www.javascriptteacher.com/dark-mode-alternate-css-style-sheet.html?rt

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

单击各个按钮就可以立即切换整个网站的 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 布局,但这块内容就等下一篇教程来具体讲解吧!

到此这篇关于详解HTML5如何使用可选样式表为网站或应用添加黑暗模式的文章就介绍到这了,更多相关HTML5黑暗模式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 #HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 #HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 #HTML / CSS
总结html5自定义属性有哪些
Apr 01 #HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 #HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 #HTML / CSS
详解HTML5常用的语义化标签
Sep 27 #HTML / CSS
You might like
PHP中extract()函数的妙用分析
2012/07/11 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
jquery 插件开发备注
2010/08/27 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Python使用type动态创建类操作示例
2020/02/29 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
市场营销计划书范文
2015/01/16 职场文书
答谢酒会主持词
2015/07/02 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers