面向小白的Hexo添加暗色模式教程

美少女万华镜4

OPPO手机都有暗色模式了,你的博客居然还没有。

更新记录

之前用cookie的方式不太好,改为localStorage

封面与内容无关,我找不到好看的封面图了。555

tg群里看见别人给博客搞了个暗色模式,想起自己博客刺眼的白色也想搞一个,搜索出几个大佬的教程,最后选择了qqdie这个方法。很适合我这样的小白。

网站夜间模式的实现,disabled好像是废弃方案,还能用就先不管这么多。

屏幕左下角的小埋是手动开关,一开始加了过渡动画,在chrome上完美,但是firefox不给面子,每次打开新页面过渡动画都执行一次。只好去掉了。

我在 chrome 上用 Stylus 这个插件写的css。颜色全靠反复拖调色板。全黑太丑了,oled屏幕也不缺这点电。此教程对小白来说唯一的难点就是写css,其他的复制我的代码到主题模板里就可以。

夜间模式的css也没什么好说的,哪个颜色舒服用哪个。暗色模式的css只写要覆盖的部分就可以。

1
2
3
img {
filter: brightness(50%);
}

这个css3属性可以让图片变暗,要不是翻文档找到了这个,我差点就用手动加遮罩层的蠢方法。可以看情况使用!important来避免css不生效。

找到主题模板里的head(一般都叫这个,只要是放网页head部分的模板文件就可以),把下面代码粘贴到head结束标签前面。

1
2
3
4
5
6
7
8
9
10
11
<link href="/css/dark.css" rel="alternate stylesheet" type="text/css" title="dark">
<script>
var night = localStorage.getItem('night');
if (night === '1') {
document.querySelector('link[title="dark"]').disabled = true;
document.querySelector('link[title="dark"]').disabled = false;
}else if((new Date().getHours() >= 22 || new Date().getHours() < 7) && (night!== '0')){
document.querySelector('link[title="dark"]').disabled = true;
document.querySelector('link[title="dark"]').disabled = false;
}
</script>

link标签里href里的css地址改成你自己写的哪个css文件相对路径(想起上次tg群里有个搞不清楚hexo以那个文件夹为根路径的人,感觉我这是假的小白教程)

做完以上步骤已经能实现在晚上22点到早上7点之间打开博客自动切换到夜间模式。

切换页面如果不是新窗口打开基本感觉不到闪烁(至少能接受),如果博客使用了pjax切换页面不会重载css应该就没有这问题。

有了自动切换当然还不够,搞个按钮方便白天也开启岂不美哉。按钮太难看了也不好,想起以前看到过别人博客底部的蕾姆,拉姆的至顶至底正好合适拿来作夜间模式开关,翻友链里别人的博客,雷姆没有找到,小埋倒是有一只。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="xm">
<img src="/images/xm.png">
</div>
<script>
function switchNightMode() {
var nightVal = document.querySelector('link[title="dark"]').disabled;
if (nightVal === true) {
document.querySelector('link[title="dark"]').disabled = true;
document.querySelector('link[title="dark"]').disabled = false;
localStorage.setItem('night','1');
} else if(nightVal === false){
document.querySelector('link[title="dark"]').disabled = true;
localStorage.setItem('night','0');
}
}
var xm = document.getElementById("xm");
xm.onclick = switchNightMode;
</script>

这部分放到layout这个文件的body里就可以。小埋的图右键从我这里另存为就可以了。

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
#xm {
cursor: pointer;
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
font-size: 0;
-webkit-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: translateY(3px);
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
}
#xm:hover {
-webkit-transform: translateY(0);
-webkit-transform: translateY(0);css
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
#xm img {
width: 50px;
}

这些css放到主题原来的css里。到这里就水完了。

同样是白色 #fff 在chrome下比firefox更暗,firefox不支持改变滚动条样式,简直丑爆了。

之前用sessionCookie在电脑上正常,关闭浏览器会自动删除,但是手机上QQ浏览器和最新的webview都好像没有立即删除。hexo虽然没有后端,但是sessionCookie灵活一些(会话结束立即删除,可以设置过期时间)。改为尝试SeesionStorage,电脑和手机上的QQ浏览器都达到了想要的效果,但webview上每个页面都重新初始化。最后只得改用LoaclStorage。

优雅的暗色模式实现方式,懂前端的推荐使用这种优雅的方式。

同一个局域网内,hexo s 后在手机浏览器打开 http://192.168.xxx.xxx:4000 就可以在手机上预览效果。xxx为你自己电脑在局域网内的ip