新增主题深色/浅色切换功能
在主页添加主题颜色切换按钮
1. 新建darkmode.css文件
在blog/themes/source/css文件夹下新建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
129
| #Dark:root {
--site-bg: #313438;
--card: #464d56;
--block: #26292c;
--block-border: #383d42;
--block-hover: #2f3337;
--text-p0: #fff;
--text-p1: #cccccc;
--text-p2: #b3b3b3;
--text-p3: #858585;
--text-p4: #707070;
--text-meta: #4d4d4d;
--text-code: #ff6333;
--block-lighten: #464c53;
}
@media screen and (max-width: 667px) {
#Dark:root {
--site-bg: #000;
}
}
#Dark:root {
--blur-bg: rgba(0,0,0,0.5);
}
#Dark .float-panel {
--blur-bg: rgba(0,0,0,0.4);
}
#Dark .tag-plugin.tag {
--theme: #ff6333;
--theme-bg1: #3d1e14;
--theme-bg2: #2f2522;
--theme-border: #5c2d1f;
--text-p0: #ffc4b3;
--text-p1: #dfae9f;
--text-p2: #f1997e;
}
#Dark .tag-plugin[color='red'] {
--theme: #f44336;
--theme-bg1: #3d1714;
--theme-bg2: #2f2322;
--theme-border: #5c231f;
--text-p0: #ffb8b3;
--text-p1: #dfa49f;
--text-p2: #f1867e;
}
#Dark .tag-plugin[color='orange'] {
--theme: #fa6400;
--theme-bg1: #3d2514;
--theme-bg2: #2f2722;
--theme-border: #5c371f;
--text-p0: #ffd1b3;
--text-p1: #dfb99f;
--text-p2: #f1ac7e;
}
#Dark .tag-plugin[color='yellow'] {
--theme: #ffbd2b;
--theme-bg1: #3d3014;
--theme-bg2: #2f2b22;
--theme-border: #5c491f;
--text-p0: #ffe7b3;
--text-p1: #dfcb9f;
--text-p2: #f1cd7e;
}
#Dark .tag-plugin[color='green'] {
--theme: #3dc550;
--theme-bg1: #143d1a;
--theme-bg2: #222f24;
--theme-border: #1f5c27;
--text-p0: #b3ffbd;
--text-p1: #9fdfa8;
--text-p2: #7ef18e;
}
#Dark .tag-plugin[color='cyan'] {
--theme: #1bcdfc;
--theme-bg1: #14353d;
--theme-bg2: #222d2f;
--theme-border: #1f4f5c;
--text-p0: #b3efff;
--text-p1: #9fd2df;
--text-p2: #7ed9f1;
}
#Dark .tag-plugin[color='blue'] {
--theme: #2196f3;
--theme-bg1: #142b3d;
--theme-bg2: #222a2f;
--theme-border: #1f415c;
--text-p0: #b3ddff;
--text-p1: #9fc3df;
--text-p2: #7ebef1;
}
#Dark .tag-plugin[color='purple'] {
--theme: #9c27b0;
--theme-bg1: #37143d;
--theme-bg2: #2d222f;
--theme-border: #531f5c;
--text-p0: #f4b3ff;
--text-p1: #d69fdf;
--text-p2: #e07ef1;
}
#Dark .tag-plugin[color='light'] {
--theme-border: #fff;
--theme-bg1: #e0e0e0;
--theme-bg2: #fff;
--text-p0: #000;
--text-p1: #111;
--text-p2: #1f1f1f;
--text-p3: #555;
--text-code: #fff;
}
#Dark .tag-plugin[color='dark'] {
--theme-border: #000;
--theme-bg1: #1f1f1f;
--theme-bg2: #111;
--text-p0: #fff;
--text-p1: #fff;
--text-p2: #e0e0e0;
--text-p3: #ddd;
--text-code: #fff;
}
#Dark .tag-plugin[color='warning'],
#Dark .tag-plugin[color='light'] {
--text-p0: #000;
--text-p1: #111;
--text-p2: #1f1f1f;
--text-p3: #555;
--text-code: #fff;
}
#Dark .social-wrap a.social:hover {
box-shadow: none;
}
|
2. 新建darkmode.js文件
在blog/themes/source/js文件夹下新建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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
var OSTheme = window.matchMedia('(prefers-color-scheme: dark)');
OSTheme.addListener(e => {
if (window.localStorage.getItem('Theme_Mode') === 'auto') {
ThemeChange('auto');
}
})
const AutoMode = (htmlElement) => {
var date = new Date();
var hours = date.getHours();
if (hours < 18 && hours >= 6) {
document.querySelector("html").id = "Light";
} else {
document.querySelector("html").id = "Dark";
}
}
let autoTimer;
const ThemeChange = (theme) => {
clearInterval(autoTimer);
const htmlElement = document.querySelector("html");
let themeBtnIcon;
try {
themeBtnIcon = document.querySelector("#start > aside > footer > div > a:last-child > i")
}
catch {
}
if (theme === 'light' || (theme === 'auto' && !OSTheme.matches)) {
htmlElement.id = "Light";
if (themeBtnIcon) {
themeBtnIcon.className = 'fa-solid fa-sun fa-spin fa-spin-reverse';
}
} else {
htmlElement.id = "Dark";
if (themeBtnIcon) {
themeBtnIcon.className = 'fa-solid fa-moon fa-fade';
}
}
if (theme === 'auto') {
if (themeBtnIcon) {
themeBtnIcon.className = 'fa-solid fa-circle-half-stroke fa-flip';
}
AutoMode(htmlElement);
autoTimer = setInterval(function () {
AutoMode(htmlElement);
}, 1000 * 60 * 30);
}
window.localStorage.setItem('Theme_Mode', theme);
}
switch (window.localStorage.getItem('Theme_Mode')) {
case 'light':
ThemeChange('light');
break;
case 'dark':
ThemeChange('dark');
break;
default:
ThemeChange('auto');
}
try {
document.querySelector("#start > aside > footer > div > a:last-child").onclick = () => {
if (window.localStorage.getItem('Theme_Mode') === 'auto') {
hud.toast('☼ 白天模式');
ThemeChange('light');
} else if (window.localStorage.getItem('Theme_Mode') === 'light') {
hud.toast('☽ 夜间模式');
ThemeChange('dark');
} else {
hud.toast('☼/☽ 随时模式');
ThemeChange('auto');
}
}
} catch {
}
|
3. 引入css样式和js控制文件
在blog/_config.yml文件中引入
1
2
3
4
5
6
|
inject:
head:
- <link rel="stylesheet" href="/css/darkmode.css">
script:
- <script type="text/javascript" src="/js/darkmode.js"></script>
|
4. 配置控制按钮
在主题的_config.yml文件中配置
1
2
3
4
5
6
|
footer:
social:
darkmode:
icon: '<img src="/images/sam.png"/>'
url: javaScript:void(0);
|