Yuhang Zheng
主页 归档 留言板 小树洞 文件箱 纸虾窝 关于
主页 归档 留言板 小树洞 文件箱 纸虾窝 关于

网页黑暗模式实现方法

网页美化
有 N 人看过

这篇文章继续说上篇没说完的部分。

上篇文章中只是说了如何在小工具右下方增加一个黑暗模式按钮的方法，但是只有按钮还是不行的啊，我们想要的是完完整整的点击就可以把页面变黑的功能。

这次我依然是参照小霖的梦花园的个人博客的实现方法，依然是打开网页的源码控制台，然后发现当点击【黑暗模式按钮】的时候，html的样式表上会增加一个data-theme=”dark”，代码如下：

1
<html class="nprogress-busy" data-theme="dark">

然后发现在source/dist/build.css文件中，在:root样式中增加在data-theme=dark模式对所有颜色相关变量重新赋值就可以，同时我也仿照着小霖的博客的源码将一些颜色相关的变量的名称进行了修改。更改后的:root样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
:root {
	--body-background: #f0f3f6;		/*网页背景*/
	--color-primary: #119da4;		/*时间，标签，分类中间的小杠杠*/
	--color-main: #13505b;			/*鼠标指向标签时的颜色*/
	--color-shadow: #dadee4;		/*组件下方的阴影*/
	--color-white: #66758c;			/*搜索标签小工具上的字体颜色*/
	--card-background: #fff;		/*文章的背景*/
	--color-black: #292525;			/*鼠标指向标题时的颜色*/
	--text-title: #353535;			/*文章标题的颜色*/
	--text: #4c4e4d;				/*文章正文的颜色*/
	--code-background: #f8f8f8;		/*代码块背景的颜色*/
	--color-post-mark: #ff0;
	--plyr-color-main: #119da4;
	--swiper-theme-color: #007aff;
	--swiper-navigation-size: 44px
}/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */figure {
	margin: 1em 40px
}[type=reset],[type=submit],[type=reset],[type=submit],button,html [type=button],html [type=button] {
	-webkit-appearance: button
}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
	border-style: none;
	padding: 0
}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
	outline: ButtonText dotted 1px
}[type=checkbox],[type=radio],[type=checkbox],[type=radio] {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0
}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
	height: auto
}[type=search],[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}[data-theme=dark] {
	--body-background: #424242;
	--card-background: #353535;
	--footer-background: var(--card-background);
	--text-title: rgba(255, 255, 255, 0.86);
	--text: var(--text-title);
	--code-background: #bcbcbc;
	--text-lighter: rgba(255, 255, 255, 0.3);
	--text-light: rgba(255, 255, 255, 0.66);
	--text-strong: rgba(255, 255, 255, 0.9);
	--color-main: rgba(255, 255, 255, 0.5);
	--mask-color: rgba(0, 0, 0, 0.3);
	--scroll-track: #646464;
	--scroll-background: var(--body-background);
	--color-shadow: var(--card-background);
	--color-primary: #46aaff;
	--color-white: #ccc;
	--color-black: #040404
}[data-theme=dark] img {
	opacity: .8
}

文章末尾我会写上GitHub的地址，有需要的同学可以去GitHub查看改动和变化的地方。

加上上面所说的内容后，我们已经可以实现了通过在浏览器后台上html源码的样式表手动增加一个data-theme=”dark” 来实现让网页变成深色模式的效果了。但是这还不行，我们现在需要的就是如何通过按下【黑暗模式按钮】来让他自动增加data-theme=”dark”这行代码，来实现变色的功能。

由于咱也不会前端的代码，所以只能采取笨办法，将两个网站的代码全部下载下来，然后一部分一部分的替换。我是将我自己的博客的代码替换到他的代码上去，然后发现了最后实现这个效果是通过一个js脚本来实现的

1
<script src="/dist/09/090322226bba9484d7daa2918bda9ab3926656c1.js"></script>

其完整的链接为：https://www.xiaolin.in/dist/09/090322226bba9484d7daa2918bda9ab3926656c1.js

所以我们要做的就是在源码中增加对这个js脚本的引用。

我将这个脚本下载下来，并放到了博客源码中的dist文件夹内，重命名为dark.js，然后在博客主题源码中的layout/_partial/footer.ejs文件内增加

1
<script src="/dist/dark.js"></script>

其次我发现小霖的博客的黑暗模式可以自动跟随系统主题默认设置，我也发现了这个功能实现的源码在head位置，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
	window.ga_tid="UA-104066300-1",
	window.ga_api="/dist/jquery-3.6.0.min.js",
	function(){
		var e="light";
		if(localStorage&&localStorage.getItem("theme"))"dark"===localStorage.getItem("theme")&&(e="dark");
		else{
			if(!window.matchMedia)return;
			window.matchMedia("(prefers-color-scheme: dark)").matches&&(e="dark")
		}
		"dark"===e&&document.documentElement.setAttribute("data-theme","dark"),
		window.theme=e
	}
	()
    </script>

这里是GitHub上的[提交号](add dark-mode & add shadow · resona/hexo-theme-aomori@70a0a72 (github.com))，大家可以直接看源码的diff。

完成之后就可以实现【黑暗模式按钮】的功能啦。