谁的博客还没有个黑夜模式呢?

在幽暗的环境里,如果主题太过明亮就会显得格外刺眼,会让眼睛非常难受。

要是万一伤害了我可爱的读者朋友的闪亮亮大眼睛怎么办?

我可是会心疼的哦~

下面讲一下具体的配置方法。

一、设置黑夜基础样式

  1. 首先在 .\themes\hexo-theme-matery\source\css\ 文件夹下新建一个 day-night.css
  2. 然后粘贴以下代码并保存文件:
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/* 字体颜色变灰白色 */
body.DarkMode .fas,
body.DarkMode .title,
body.DarkMode .row .text,
body.DarkMode article .article-content .summary,
body.DarkMode .card .card-image .card-title,
body.DarkMode .fa-moon-o:before,
body.DarkMode .fa-lightbulb-o:before,
body.DarkMode article .article-tags .chip,
body.DarkMode .chip-container .tag-title,
body.DarkMode div.jqcloud a,
body.DarkMode .friends-container .tag-title,
body.DarkMode .frind-ship .title h1,
body.DarkMode .card .card-content p,
body.DarkMode .card .card-content .dss,
body.DarkMode .v[data-class='v'] .vcount,
body.DarkMode .v[data-class='v'] .vcount .vnum,
body.DarkMode pre code,
body.DarkMode h1,
body.DarkMode h2,
body.DarkMode h3,
body.DarkMode h4,
body.DarkMode h5,
body.DarkMode h6,
body.DarkMode li,
body.DarkMode p,
body.DarkMode header .side-nav .mobile-head .logo-name,
body.DarkMode header .side-nav .mobile-head .logo-desc,
body.DarkMode header .side-nav .menu-list a,
body.DarkMode .bg-cover .post-title,
body.DarkMode.read .bg-cover .description,
body.DarkMode input,
body.DarkMode #contact .form-inline .form-group,
body.DarkMode #vcomments textarea {
color: rgba(255, 255, 255, 0.6);
}

/* 背景颜色变灰色 */
body.DarkMode .card,
body.DarkMode .block-with-text:after {
background-color: #282c34;
}

/* 背景颜色变黑色 */
body.DarkMode,
body.DarkMode .v[data-class='v'] .vcount,
body.DarkMode #rewardModal .modal-content,
body.DarkMode .modal,
body.DarkMode header .side-nav,
body.DarkMode header .side-nav .menu-list .m-nav-show {
background-color: #12121c;
}

/* 改变透明度 */
body.DarkMode .aplayer {
background: #2f3742 !important;
}

body.DarkMode img,
body.DarkMode strong {
filter: brightness(0.7);
}

/*toc目录滤镜*/
body.DarkMode .toc-widget {
filter: invert(0.8);
}

body.DarkMode .toc-widget .toc-list-item {
color: #000
}

/* Skill bar text color */
body.DarkMode .skillbar .skill-bar-percent {
color: #000;
}

/* 黑夜模式下 placeholder 颜色 */
body.DarkMode ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color : rgba(223, 223, 223, 0.3);
}
body.DarkMode :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color : rgba(223, 223, 223, 0.3);
}
body.DarkMode ::-moz-placeholder { /* Mozilla Firefox 19+ */

color : rgba(223, 223, 223, 0.3);
}
body.DarkMode :-ms-input-placeholder { /* Internet Explorer 10-11 */
color : rgba(223, 223, 223, 0.3);
}
body.DarkMode ::-ms-input-placeholder { /* Microsoft Edge */
color : rgba(223, 223, 223, 0.3);
}

  1. 然后打开主题目录下的 _config.yml 配置文件,在大约 480 行的位置找到 libs 中的 css,并添加一行代码如下:
1
2
3
libs:
css:
dayNight: /css/day-night.css # 这是要添加的那一行代码
  1. 接着在主题目录.\layout\_partial\ 文件夹里找到 head.ejs 文件,在 head 标签下的合适位置添加如下代码:
1
2
<!-- 黑夜模式样式 css -->
<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- theme.libs.css.dayNight %>">

二、添加切换按钮

  1. 主题目录\layout\_partial\ 文件夹里添加一个 day-night.ejs 文件,粘贴如下代码并保存:
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
<!-- 白天和黑夜主题 -->
<div class="sum-moon-box">
<a class="btn-floating btn-large waves-effect waves-light" onclick="switchNightMode()" title="切换主题" >
<i id="sum-moon-icon" class="fas fa-sun" style="width:48px; height:48px; font-size: 28px;"></i>
</a>
</div>

<script>
function switchNightMode() {
$('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($('body')),
setTimeout(function () {
$('body').hasClass('DarkMode')
? ($('body').removeClass('DarkMode'), localStorage.setItem('isDark', '0'), $('#sum-moon-icon').removeClass("fa-sun").addClass('fa-moon'))
: ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon')),

setTimeout(function () {
$('.Cuteen_DarkSky').fadeOut(1e3, function () {
$(this).remove()
})
}, 2e3)
})
}

//黑夜模式自动开启功能(首次加载)
setTimeout(function () {
if (localStorage.getItem('isDark') == null) {
if ((new Date().getHours() >= 19 || new Date().getHours() < 7) && !$('body').hasClass('DarkMode')) {
$('body').addClass('DarkMode');
localStorage.setItem('isDark', '1');
$('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon');
}
} else {
/* 模式判断 */
if (localStorage.getItem('isDark') === '1') {
document.body.classList.add('DarkMode');
$('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon');
} else {
document.body.classList.remove('DarkMode');
$('#sum-moon-icon').removeClass("fa-sun").addClass('fa-moon');
}
}
}, 0);
</script>
  1. 主题目录\layout\ 文件夹里找到 layout.ejs 文件,然后在 body 标签下添加如下代码:
1
<%- partial('_partial/day-night.ejs') %>
  1. 最后打开前面的 day-night.css 文件,追加如下代码(给按钮添加样式):
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/* 黑夜模式动画 */
.Cuteen_DarkSky,
.Cuteen_DarkSky:before {
content: '';
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 8888;
}

.Cuteen_DarkSky {
background: linear-gradient(#feb8b0, #fef9db);
}

.Cuteen_DarkSky:before {
transition: 2s ease all;
opacity: 0;
background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
}

.DarkMode .Cuteen_DarkSky:before {
opacity: 1;
}

.Cuteen_DarkPlanet {
z-index: 9999;
position: fixed;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
transform-origin: center bottom;
}

@-webkit-keyframes CuteenPlanetMove {
0% {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

@keyframes CuteenPlanetMove {
0% {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

.Cuteen_DarkPlanet:after {
position: absolute;
left: 35%;
top: 40%;
width: 9.375rem;
height: 9.375rem;
border-radius: 50%;
content: '';
background: linear-gradient(#fefefe, #fffbe8);
}

/*黑夜模式按钮*/
.sum-moon-box {
width: 48px;
height: 48px;
text-align: center;
border-radius: 50%;
position: fixed;
right: 15px;
bottom: 195px;
margin-bottom: 0;
z-index: 900;
}

.sum-moon-box .btn-floating {
width: 48px;
height: 48px;
}

.sum-moon-box i {
font-size: 1.8rem;
line-height: 48px !important;
}

到这里你的黑夜模式就已经设置完毕了,剩下的就是你自己的个性化优化了。

感谢大佬 Ruins 为我提供的教程,本篇教程是在其代码基础上优化的来。
并且修复了其部分BUG。

同时不建议大家设置那个黑夜的动态背景,本人实测那个东西会有个手机端的BUG,具体原因不太清楚。
具体表现为在友链等页面会出现页面一闪一闪的情况(只有手机端,电脑端调试也不会出问题)。
如果有清楚的大佬,还望赐教。
因为那个背景确实好看,很适合黑夜模式。

三、代码优化【2022.9.5】

之前代码中依靠 localStorage 来存储信息,从而帮助用户长时间维持黑夜模式。但是,这个 localStorage 的特点就是永久存储。意思就是如果用户不主动删除,这个变量将会一直存在。

那么,问题就来了,让我们假设一个场景:

①假设你的某个真爱用户在晚上访问了你的博客,你的网站判断了现在时晚上 20:30,于是自动开启了黑夜模式,你的用户很满意地浏览一阵后就离开了。
②第二天早上,该用户再次打开网站,结果网站居然还是黑夜模式…要知道现在都早上 9:00 了啊,还要用户手动切换!用户表示很麻烦!

对于一直秉承用户至上原则的我来说,这可不行,怎么能这么麻烦我的朋友呢?改,这个必须改!

所以,我最后修改了原代码,通过 cookie 来实现时间过长自动删除 isDark 变量,从而进入时间判断模式(通过当前时间来选择是否开启黑夜模式)。如果 cookie 中 isDark 变量还在,那就依照其记录值来选择黑夜模式,保持用户的选择。

代码中我设置的时间为 6 小时,你可以自己选择修改。

最后,源码附上:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<script>
// 在这里修改 isDark 变量过期的时间
var isDarkLiveHours = 6;

function setCookie(name, value, hoursToLive) {
var cookie = name + "=" + encodeURIComponent(value);

if (typeof hoursToLive === "number") {
cookie += ";path=/;max-age=" + (hoursToLive*60*60);
}

document.cookie = cookie;
}

function getCookie(name) {
// 拆分 cookie 字符串
var cookieArr = document.cookie.split(";");

// 循环遍历数组元素
for(var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");

/* 删除 cookie 名称开头的空白并将其与给定字符串进行比较 */
if(name == cookiePair[0].trim()) {
// 解码cookie值并返回
return decodeURIComponent(cookiePair[1]);
}
}
// 如果未找到,则返回null
return null;
}

function switchNightMode() {
$('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($('body')),
setTimeout(function() {
$('body').hasClass('DarkMode')
? (
$('body').removeClass('DarkMode'),
setCookie('isDark', 'false', isDarkLiveHours),
$('#day-btn-icon-sun').css('display', 'none'),
$('#night-btn-icon-moon').css('display', 'inherit')
) : (
$('body').addClass('DarkMode'),
setCookie('isDark', 'true', isDarkLiveHours),
$('#day-btn-icon-sun').css('display', 'inherit'),
$('#night-btn-icon-moon').css('display', 'none')
),

setTimeout(function () {
$('.Cuteen_DarkSky').fadeOut(1e3, function () {
$(this).remove()
})
}, 2e3);
});
}

//黑夜模式自动开启功能(首次加载)
setTimeout(function () {
if (getCookie('isDark') == null) {
if ((new Date().getHours() >= 19 || new Date().getHours() < 7) && !$('body').hasClass('DarkMode')) {
$('body').addClass('DarkMode');
setCookie('isDark', 'true', isDarkLiveHours);
$('#day-btn-icon-sun').css('display', 'inherit');
$('#night-btn-icon-moon').css('display', 'none');
}
} else {
if (getCookie('isDark') === 'true') {
document.body.classList.add('DarkMode');
$('#day-btn-icon-sun').css('display', 'inherit');
$('#night-btn-icon-moon').css('display', 'none');
} else {
document.body.classList.remove('DarkMode');
$('#day-btn-icon-sun').css('display', 'none');
$('#night-btn-icon-moon').css('display', 'inherit');
}
}

}, 0);
</script>