抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

本文灵感来自于阳光派plus

原效果

DearXuan

修改思路

原js会在页面左下角绘制一个按钮,点击之后会使用自己的CSS来改变颜色,但是volantis已经有了自己的暗黑模式CSS,并且两者在检测暗黑模式上也用了不同的变量,导致暗黑模式被两次开启的bug。
考虑到原作者开关暗黑模式其实是执行特定的js代码,因此只需要修改主题的“暗黑模式”按钮,让用户点击时执行原作者的js代码就可以实现动画效果

方法

在volantis/layout/_partial下新建文件”darkmode.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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<script>
function music_on() {
var audio1 = document.getElementById('bg_music');
if (audio1.paused) {
audio1.play();
}else{
audio1.pause();
audio1.currentTime = 0;//音乐从头播放
}
}
function BackTOP() {
$("#btn").hide();
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$("#btn").fadeIn(200);
} else {
$("#btn").fadeOut(200);
}
});
$("#btn").click(function () {
$('body,html').animate({
scrollTop: 0
},
500);
return false;
});
});
$(function () {
$("#say").click(function () {
$('body,html').animate({
scrollTop: $('html, body').get(0).scrollHeight
},
500);
return false;
});
})
}

$('#readmode').click(function () {
$('body').toggleClass('read-mode')
})

function SiderMenu() {
$('#main-container').toggleClass('open');
$('.iconflat').css('width', '50px').css('height', '50px');
$('.openNav').css('height', '50px');
$('#main-container,#mo-nav,.openNav').toggleClass('open')
}

function switchNightMode() {
$('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($("body")), setTimeout(
function () {
var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") ||
'0';
(volantis.dark.mode == "dark")
?
($("html").addClass("DarkMode"),
document.cookie = "DarkMode=1;path=/",
$('#modeicon').attr("xlink:href", "#icon-sun"))
:
($("html").removeClass("DarkMode"),
document.cookie = "DarkMode=0;path=/",
$('#modeicon').attr("xlink:href", "#icon-_moon")),
setTimeout(function () {
$(".Cuteen_DarkSky").fadeOut(1e3, function () {
$(this).remove()
})
}, 2e3)
}), 50
}

function checkNightMode() {
if ($("html").hasClass("n-f")) {
$("html").removeClass("day");
$("html").addClass("DarkMode");
$('#modeicon').attr("xlink:href", "#icon-sun")
return;
}
if ($("html").hasClass("d-f")) {
$("html").removeClass("DarkMode");
$("html").addClass("day");
$('#modeicon').attr("xlink:href", "#icon-_moon")

return;
}
if (document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '') {
if (volantis.dark.mode == "dark") {
$("html").addClass("DarkMode");
document.cookie = "DarkMode=1;path=/";
console.log('夜间模式开启');
$('#modeicon').attr("xlink:href", "#icon-sun")
} else {
$("html").removeClass("DarkMode");
document.cookie = "DarkMode=0;path=/";
console.log('夜间模式关闭');
$('#modeicon').attr("xlink:href", "#icon-_moon")
}
} else {
var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if (DarkMode == '0') {
$("html").removeClass("DarkMode");
$('#modeicon').attr("xlink:href", "#icon-_moon")
} else if (DarkMode == '1') {
$("html").addClass("DarkMode");
$('#modeicon').attr("xlink:href", "#icon-sun")
}
}
}
BackTOP();
</script>

<style>
#RightDownBtn {
position: fixed;
left: 1.875rem;
bottom: 1.875rem;
padding: 0.3125rem 0.625rem;
background: #fff;
border-radius: 0.1875rem;
transition: 0.3s ease all;
z-index: 1;
align-items: flex-end;
flex-direction: column;
display: -moz-flex;
display: flex;
float: right;
}

#RightDownBtn>a,
#RightDownBtn>label {
width: 1.5em;
height: 1.5em;
margin: 0.3125rem 0;
transition: .2s cubic-bezier(.25, .46, .45, .94);
}

/* font color */
.DarkMode #page,
.DarkMode #colophon,
.DarkMode #vcomments .vbtn,
.DarkMode .art-content #archives .al_mon_list .al_mon,
.DarkMode .art-content #archives .al_mon_list span,
.DarkMode body,
.DarkMode .art-content #archives .al_mon_list .al_mon,
.DarkMode .art-content #archives .al_mon_list span,
.DarkMode button,
.DarkMode .art .art-content #archives a,
.DarkMode textarea,
.DarkMode strong,
.DarkMode a,
.DarkMode p,
.DarkMode li,
.DarkMode .label {
color: rgba(255, 255, 255, .6);
}


.DarkMode #page,
.DarkMode body,
.DarkMode #colophon,
.DarkMode #main-container,
.DarkMode #page .yya,
.DarkMode #content,
.DarkMode #contentss,
.DarkMode #footer {
background-color: #292a2d;
}
.DarkMode strong,
.DarkMode img {
filter: brightness(.7);
}

/* sun and noon */
.Cuteen_DarkSky,
.Cuteen_DarkSky:before {
content: "";
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 88888888
}

.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: 99999999;
position: fixed;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
animation: CuteenPlanetMove 2s cubic-bezier(.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)
}
</style>

打开volantis/layout/layout.ejs,在上面加上:

1
<%- partial('_partial/darkmode', null, {cache: !config.relative_link}) %>

打开volantis/layout/_partial/header.ejs
搜索darkmode,如果文件没有被修改,应该出现在第37行
在下面可以看到一个a标签,为该标签添加点击事件

1
onclick="switchNightMode()"

打开volantis/layout/_plugins/rightmenu/layout.ejs,搜索darkmode
添加点击事件

1
2
3
4
5
<li class='option menuOption-Content' onclick="switchNightMode()">
<span class='vlts-menu opt fix-cursor-default toggle-mode-btn' id='menuDarkBtn'>
<i class='<%= theme.rightmenu.darkmode.icon %> fa-fw '></i> <%- trim(theme.rightmenu.darkmode.name) %>
</span>
</li>

重新生成后运行,可以看到已经出现动画效果

评论