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
| // // 页面加载时应用当前主题模式
// document.addEventListener('DOMContentLoaded', function () {
// // 获取本地存储的主题模式
// const savedTheme = localStorage.getItem('theme') || 'light';
//
// // 设置 html 和 body 根据模式
// if (savedTheme === 'dark') {
// document.documentElement.setAttribute('data-theme', 'dark');
// document.querySelector('body').classList.add('DarkMode');
// } else {
// document.documentElement.setAttribute('data-theme', 'light');
// document.querySelector('body').classList.remove('DarkMode');
// }
//
// // 处理模式图标
// const modeIcon = document.getElementById('modeicon');
// if (modeIcon) {
// if (savedTheme === 'dark') {
// modeIcon.setAttribute('xlink:href', '#icon-sun');
// } else {
// modeIcon.setAttribute('xlink:href', '#icon-moon');
// }
// }
// });
// 如果 Butterfly 开启了 PJAX，再监听 pjax:complete
// document.addEventListener('pjax:complete', function () {
// const savedTheme = localStorage.getItem('theme') || 'light';
// 如果 Butterfly 开启了 PJAX，这里只用了PJAX监听：
// 初始化主题（首次加载页面）
function initTheme() {
const savedTheme = localStorage.getItem('theme') || 'light'; // 默认是 'light'
// 设置 <html> 标签的 data-theme 属性
document.documentElement.setAttribute('data-theme', savedTheme);
// 设置 body 的 DarkMode 类
if (savedTheme === 'dark') {
document.body.classList.add('DarkMode');
} else {
document.body.classList.remove('DarkMode');
}
// 更新按钮图标
const modeIcon = document.getElementById('modeicon');
if (modeIcon) {
if (savedTheme === 'dark') {
modeIcon.setAttribute('xlink:href', '#icon-sun');
} else {
modeIcon.setAttribute('xlink:href', '#icon-moon');
}
}
}
// 页面首次加载时应用主题
document.addEventListener('DOMContentLoaded', initTheme);
// 如果 Butterfly 开启了 PJAX，监听 pjax:complete 事件
document.addEventListener('pjax:complete', initTheme);
function switchNightMode() {
// 插入太阳月亮动画 DOM
document.querySelector('body').insertAdjacentHTML('beforeend', '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"><div id="sun"></div><div id="moon"></div></div></div>');
setTimeout(function () {
// 切换 DarkMode 类
if (document.querySelector('body').classList.contains('DarkMode')) {
document.querySelector('body').classList.remove('DarkMode');
localStorage.setItem('isDark', '0');
document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon');
} else {
document.querySelector('body').classList.add('DarkMode');
localStorage.setItem('isDark', '1');
document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun');
}
setTimeout(function () {
document.getElementsByClassName('Cuteen_DarkSky')[0].style.transition = 'opacity 3s';
document.getElementsByClassName('Cuteen_DarkSky')[0].style.opacity = '0';
setTimeout(function () {
document.getElementsByClassName('Cuteen_DarkSky')[0].remove();
}, 1000);
}, 2000);
});
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
if (nowMode === 'light') {
// 设置太阳月亮透明度
document.getElementById("sun").style.opacity = "1";
document.getElementById("moon").style.opacity = "0";
setTimeout(function () {
document.getElementById("sun").style.opacity = "0";
document.getElementById("moon").style.opacity = "1";
}, 1000);
// 激活夜间模式
document.documentElement.setAttribute('data-theme', 'dark'); // 设置 data-theme 为 dark
localStorage.setItem('theme', 'dark'); // 保存到 localStorage
document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun');
// 弹窗提醒
setTimeout(() => {
new Vue({
data: function () {
this.$notify({
title: "关灯啦🌙",
message: "明月装饰了你的窗子，你装饰了别人的梦。",
position: 'top-left',
offset: 50,
showClose: true,
type: "success",
duration: 5000
});
}
});
}, 2000);
} else {
// 设置太阳月亮透明度
document.getElementById("sun").style.opacity = "0";
document.getElementById("moon").style.opacity = "1";
setTimeout(function () {
document.getElementById("sun").style.opacity = "1";
document.getElementById("moon").style.opacity = "0";
}, 1000);
// 激活白天模式
document.documentElement.setAttribute('data-theme', 'light'); // 设置 data-theme 为 light
localStorage.setItem('theme', 'light'); // 保存到 localStorage
document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon');
// 弹窗提醒
setTimeout(() => {
new Vue({
data: function () {
this.$notify({
title: "开灯啦🌞",
message: "歌未竟，东方白。",
position: 'top-left',
offset: 50,
showClose: true,
type: "success",
duration: 5000
});
}
});
}, 2000);
}
// 处理一些特定情况
typeof utterancesTheme === 'function' && utterancesTheme();
typeof FB === 'object' && window.loadFBComment();
window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200);
}
|
