Volantis主题用户可完全参照本文进行修改,其它主题用户看着改吧😂

本文最后更新于2020年12月29日19点01分

咱废话不多说,直接开始正文吧😏

准备

  1. 开启 darkmodejs 配置
  2. navbar 配置项的适当位置添加下列配置代码
    1
    2
    3
    - name: 暗黑模式 # 可自定义
    icon: fas fa-moon # 可自定义
    toggle: darkmode
  3. 根据下文进行添加 Message.js添加弹窗 css 样式操作

修改 layout/_partial/scripts/darkmode.ejs 文件

  1. 将下面这行代码复制添加至该文件的开头
1
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Colsrch/CDN@master/judge_time/js.js"></script>
  1. 将下列代码复制添加至该文件的末尾(script)标签前面哦
点击查看
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
// 自动夜间模式
if (navigator.geolocation) { //获取地理位置 用于判断日出日落时间
navigator.geolocation.getCurrentPosition(
function (position) {
var res = computeSunRiseSunSet(position.coords.latitude, position.coords.longitude, 8);
console.log(res.str)
adjust_time(res.strSunRise, res.strSunSet, "08:00", "12:00", "14:00", "23:00")
},
function (e) {
adjust_time("7:00", "17:30", "08:00", "12:00", "14:00", "23:00") //未允许获取地理位置时,使用默认时间
console.log("未允许获取地理位置,使用默认配置时间")
throw (e.message);
}
)
}
function adjust_time(beginTime, endTime, morningTime, noonTime, afternoonTime, nightTime) {
const rootElement = document.documentElement;
var strb = beginTime.split(":");
if (strb.length != 2) {
return false;
}

var stre = endTime.split(":");
if (stre.length != 2) {
return false;
}

var strmorning = morningTime.split(":"); //12点
if (stre.length != 2) {
return false;
}

var strnoon = noonTime.split(":"); //12点
if (stre.length != 2) {
return false;
}

var strafternoon = afternoonTime.split(":"); //13点
if (stre.length != 2) {
return false;
}

var strnight = nightTime.split(":"); //23点
if (stre.length != 2) {
return false;
}

var b = new Date();
var e = new Date();
var n = new Date();
var morning = new Date();
var noon = new Date();
var afternoon = new Date();
var night = new Date();

b.setHours(strb[0]);
b.setMinutes(strb[1]);
e.setHours(stre[0]);
e.setMinutes(stre[1]);
morning.setHours(strmorning[0]);
morning.setMinutes(strmorning[1]);
noon.setHours(strnoon[0]);
noon.setMinutes(strnoon[1]);
afternoon.setHours(strafternoon[0]);
afternoon.setMinutes(strafternoon[1]);
night.setHours(strnight[0]);
night.setMinutes(strnight[1]);


$.getJSON("https://v1.hitokoto.cn", function (hitokoto) {
//在这里面处理获得的数据
if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
var daytimetitle = ''
var daytimemessage = ''
if (n.getTime() - morning.getTime() < 0) {
// 早上
daytimetitle = '早安'
}
else if (n.getTime() - noon.getTime() < 0) {
// 上午
daytimetitle = '上午好'
}
else if (n.getTime() - afternoon.getTime() < 0) {
// 中午
daytimetitle = '中午好'
daytimemessage = '<br>要注意休息哦~'
}
else {
// 下午
daytimetitle = '下午好'
}
// 判断是否已经开启夜间模式
if (rootElement.getAttribute('data-user-color-scheme', 'dark')) {
// 已开启夜间模式,修改按钮状态
$.message({ title: '操作通知', message: daytimetitle + ',已自动为您切换为日间模式。<br>' + hitokoto.hitokoto + daytimemessage, type: 'success' });
const mode = toggleCustomDarkMode();
applyCustomDarkModeSettings(mode);
}
else {
// 未开启夜间模式,不执行操作
$.message({ title: daytimetitle, message: hitokoto.hitokoto + daytimemessage, type: 'info' });
return true;
}
} else {
// 晚上
var nighttitle = ''
var nightmessage = ''
if (night.getTime() - n.getTime() < 0 || n.getTime() - b.getTime() < 0) {
nighttitle = '夜深了'
nightmessage = '<br>该睡觉啦~'
}
else {
nighttitle = '晚上好'
nightmessage = '<br>吃晚饭了吗?要注意眼睛哦。'
}
// 判断是否已经开启夜间模式
if (rootElement.getAttribute('data-user-color-scheme', 'dark')) {
// 已开启夜间模式,不执行操作
$.message({ title: nighttitle, message: hitokoto.hitokoto + nightmessage, type: 'info' });
return true;
}
else {
// 未开启夜间模式,修改按钮状态
$.message({ title: '操作通知', message: nighttitle + ',已自动为您切换为夜间模式。<br>' + hitokoto.hitokoto + nightmessage, type: 'success' });
const mode = toggleCustomDarkMode();
applyCustomDarkModeSettings(mode);
}
}
});
}