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

效果

DearXuan

原版代码只提供了触发动画的函数,需要手动添加到onclick里,得修改主题源码,非常不方便。这里我修改了一下代码,使之更方便使用:

  1. 删除了原版的cookie,直接使用volantis.dark来判断当前模式
  2. 把动画函数绑定至volantis.dark,不需要手动添加onclick

引入文件

volantis/source/custom/ 下创建文件”darkmode.js”和”darkmode.css”,这里的目录和文件名可以任选。但是建议搞一个专门放自定义文件的文件夹,以免混淆

你也可以放到其他地方

volantis/source/custom/darkmode.js
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
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 () {
(volantis.dark.mode == "dark")
?
($("html").addClass("DarkMode"),
$('#modeicon').attr("xlink:href", "#icon-sun"))
:
($("html").removeClass("DarkMode"),
$('#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 (volantis.dark.mode == "dark") {
$("html").addClass("DarkMode");
$('#modeicon').attr("xlink:href", "#icon-sun")
} else {
$("html").removeClass("DarkMode");
$('#modeicon').attr("xlink:href", "#icon-_moon")
}
}
BackTOP();
window.addEventListener('load', ()=>{
volantis.dark.push(()=>{
switchNightMode();
})
}, {once: true})
volantis/source/custom/darkmode.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
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
#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)
}

在head里引入这两个文件,根据你的文件实际地址修改

hexo/source/_volantis/headBegin.ejs
1
2
<script src="/custom/darkmode.js"></script>
<link rel="stylesheet" href="/custom/darkmode.css" type="text/css"/>

到这里就已经完成了添加

评论