Skip to content

Commit c42eb30

Browse files
LightLight
Light
authored and
Light
committed
refactor(dark): 调整以支持在不同平台上使用各自的暗黑模式设定
1 parent 7e4a774 commit c42eb30

7 files changed

Lines changed: 144 additions & 53 deletions

File tree

‎src/css/xenon-core.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -784,7 +784,6 @@ body.night .EKHJj {
784784
position: relative;
785785
top: 1px;
786786
padding: 17px 12px;
787-
overflow: hidden;
788787
}
789788

790789
.board .mobile-menu-toggle a {

‎src/fonts/auto.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/fonts/night.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/fonts/system.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/footer.php‎

Lines changed: 119 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -93,56 +93,89 @@ function show_date_time() {
9393
}
9494
}
9595

96-
<?php if ($this->options->zmki_ah == '0') : ?>
97-
// 跟随系统
98-
const matches = matchMedia('(prefers-color-scheme: dark)').matches;
99-
if (matches) {
100-
document.body.classList.add('night');
101-
if (cookie.get('night') !== '1') {
102-
cookie.set('night', '1');
103-
console.log('跟随系统开启夜间模式');
104-
}
105-
} else {
106-
document.body.classList.remove('night');
107-
if (cookie.get('night') !== '0') {
108-
cookie.set('night', '0');
109-
console.log('跟随系统关闭夜间模式');
110-
}
111-
}
112-
<?php elseif ($this->options->zmki_ah == '1') : ?>
113-
// 自动切换
114-
if (new Date().getHours() >
115-
19 ||
116-
new Date().getHours() <
117-
7) {
118-
document.body.classList.add('night');
119-
if (cookie.get('night') !== '1') {
120-
cookie.set('night', '1');
121-
console.log('夜间模式自动开启');
122-
}
123-
} else {
124-
document.body.classList.remove('night');
125-
if (cookie.get('night') !== '0') {
126-
cookie.set('night', '0');
127-
console.log('夜间模式自动关闭');
96+
function darkHandler(darkMode, mode, write = false) {
97+
write && write && cookie.set('dark_mode', darkMode);
98+
const night = cookie.get('night');
99+
if (darkMode === '1') {
100+
// 夜间模式
101+
mode && (mode.style.backgroundImage = 'url(<?php echo THEME_URL ?>/fonts/night.svg)');
102+
if (night !== '1') {
103+
document.body.classList.add('night');
104+
cookie.set('night', '1');
105+
console.log('开启夜间模式');
106+
}
107+
} else if (darkMode === '2') {
108+
// 跟随系统
109+
mode && (mode.style.backgroundImage = 'url(<?php echo THEME_URL ?>/fonts/system.svg)');
110+
const matches = matchMedia('(prefers-color-scheme: dark)').matches;
111+
if (matches) {
112+
if (night !== '1') {
113+
document.body.classList.add('night');
114+
cookie.set('night', '1');
115+
console.log('跟随系统开启夜间模式');
116+
}
117+
} else {
118+
if (night !== '0') {
119+
document.body.classList.remove('night');
120+
cookie.set('night', '0');
121+
console.log('跟随系统关闭夜间模式');
122+
}
123+
}
124+
} else if (darkMode === '3') {
125+
// 自动切换
126+
mode && (mode.style.backgroundImage = 'url(<?php echo THEME_URL ?>/fonts/auto.svg)');
127+
const hours = new Date().getHours();
128+
if (hours > 19 || hours < 7) {
129+
if (night !== '1') {
130+
document.body.classList.add('night');
131+
cookie.set('night', '1');
132+
console.log('夜间模式自动开启');
133+
}
134+
} else {
135+
if (night !== '0') {
136+
document.body.classList.remove('night');
137+
cookie.set('night', '0');
138+
console.log('夜间模式自动关闭');
139+
}
140+
}
141+
} else {
142+
// 日间模式
143+
mode && (mode.style.backgroundImage = 'url(<?php echo THEME_URL ?>/fonts/sun.svg)');
144+
if (night !== '0') {
145+
document.body.classList.remove('night');
146+
cookie.set('night', '0');
147+
console.log('开启日间模式');
148+
}
128149
}
129150
}
130-
<?php else : ?>
131-
// 手动切换夜间模式
151+
152+
// 暗黑模式
153+
const dark = cookie.get('dark_mode');
154+
// 模式开关
132155
const modeSwitch = document.querySelector('.my_mode_switch');
156+
darkHandler(dark, modeSwitch);
157+
const darkList = document.querySelector('.dark_mode_list');
158+
133159
modeSwitch && modeSwitch.addEventListener('click', e => {
134160
e.stopPropagation();
135-
if (cookie.get('night') === '1') {
136-
document.body.classList.remove('night');
137-
cookie.set('night', '0');
138-
console.log('关闭夜间模式');
139-
} else {
140-
document.body.classList.add('night');
141-
cookie.set('night', '1');
142-
console.log('开启夜间模式');
161+
if (darkList) {
162+
if (darkList.classList.contains('open')) {
163+
darkList.classList.remove('open');
164+
} else {
165+
darkList.classList.add('open');
166+
}
143167
}
144168
});
145-
<?php endif; ?>
169+
170+
const modeSelectors = ['.dark_mode_sun', '.dark_mode_night', '.dark_mode_system', '.dark_mode_auto']
171+
modeSelectors.forEach((selector, index) => {
172+
const ele = document.querySelector(selector);
173+
ele && ele.addEventListener('click', e => {
174+
e.stopPropagation();
175+
darkHandler(String(index), modeSwitch, true);
176+
darkList && darkList.classList.remove('open');
177+
})
178+
})
146179
})();
147180
</script>
148181

@@ -160,12 +193,53 @@ function show_date_time() {
160193
<?php endif; ?>
161194

162195
.my_mode_switch {
163-
background-image: url("<?php echo THEME_URL ?>/fonts/night.svg");
196+
background-image: url("<?php echo THEME_URL ?>/fonts/sun.svg");
197+
}
198+
199+
body.night .dropdown-menu {
200+
background-color: #221e1e;
201+
border: 1px solid #232b32;
202+
}
203+
204+
.dark_mode_list ul {
205+
margin-top: 40px;
206+
min-width: 80px;
164207
}
165-
body.night .my_mode_switch {
208+
209+
.dark_mode_list .dark_mode_li {
210+
height: 24px;
211+
padding: 0 10px;
212+
}
213+
214+
.dark_mode_list .dark_mode_li span {
215+
display: inline-flex;
216+
cursor: pointer;
217+
}
218+
219+
.dark_mode_list i {
220+
display: inline-block;
221+
width: 16px;
222+
height: 16px;
223+
background-size: 16px 16px;
224+
margin-right: 5px;
225+
}
226+
227+
.dark_mode_sun i {
166228
background-image: url("<?php echo THEME_URL ?>/fonts/sun.svg");
167229
}
168230

231+
.dark_mode_night i {
232+
background-image: url("<?php echo THEME_URL ?>/fonts/night.svg");
233+
}
234+
235+
.dark_mode_system i {
236+
background-image: url("<?php echo THEME_URL ?>/fonts/system.svg");
237+
}
238+
239+
.dark_mode_auto i {
240+
background-image: url("<?php echo THEME_URL ?>/fonts/auto.svg");
241+
}
242+
169243
span.title, .main-menu {
170244
font-size: <?php $this->options->menu_title(); ?>px;
171245
}

‎src/functions.php‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -171,9 +171,6 @@ function themeConfig($form)
171171
// 手机端每行显示数量
172172
$zmki_wapsl = new Typecho_Widget_Helper_Form_Element_Radio('zmki_wapsl', array('0' => _t('单栏'), '1' => _t('双栏'), '2' => _t('三栏')), '0', _t('<svg class="icon zmki_aliico" aria-hidden="true"><use xlink:href="#icon-phone"></use></svg> 手机端栏目数量'), _t("手机端显示数量的布局。此功能可避免页面过于庸长，默认单栏，推荐双栏显示<br>注意：如调整失效，请刷新请浏览器缓存"));
173173
$form->addInput($zmki_wapsl);
174-
// 暗黑开关
175-
$zmki_ah = new Typecho_Widget_Helper_Form_Element_Radio('zmki_ah', array('0' => _t('跟随系统'), '1' => _t('自动切换'), '2' => _t('手动切换')), '1', _t('<svg class="icon zmki_aliico" aria-hidden="true"><use xlink:href="#icon-battery"></use></svg> 暗黑模式'), _t("跟随系统：跟随系统设置；自动切换：19:00~7:00；手动切换：主页上显示暗黑模式开关"));
176-
$form->addInput($zmki_ah);
177174
// 顶部模块
178175
$zmki_top_main = new Typecho_Widget_Helper_Form_Element_Radio('zmki_top_main', array('0' => _t('禁用'), '1' => _t('启用')), '1', _t('<svg class="icon zmki_aliico" aria-hidden="true"><use xlink:href="#icon-prompt"></use></svg> <span style="color: #608cee; margin-right:0px;">顶部</span><span style="color: #fb5962;margin-right:0px;">多色</span><span style="color: #fbb359;margin-right:0px;">模块</span><span style="color: #53bf6b;margin-right:0px;">开关</span>'), _t("是否开启网站顶部四项多色小模块"));
179176
$form->addInput($zmki_top_main);

‎src/index.php‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,16 @@ class="fa fa-heart xiaotubiao"
3333
</li>
3434
</ul>
3535
</div>
36-
<?php if ($this->options->zmki_ah == '2') : ?>
37-
<div class="my_mode_switch" title="切换模式"></div>
38-
<?php endif; ?>
36+
<div class="my_mode_switch" title="切换模式"></div>
37+
<div class="dark_mode_list dropdown xs-left">
38+
<ul class="dropdown-menu dropdown-menu-right">
39+
<li class="dropdown-header">选择模式</li>
40+
<li class="dark_mode_li"><span class="dark_mode_sun"><i></i>日间模式</span></li>
41+
<li class="dark_mode_li"><span class="dark_mode_night"><i></i>夜间模式</span></li>
42+
<li class="dark_mode_li"><span class="dark_mode_system"><i></i>跟随系统</span></li>
43+
<li class="dark_mode_li"><span class="dark_mode_auto"><i></i>自动切换</span></li>
44+
</ul>
45+
</div>
3946
</div>
4047
<!--顶部美化结束-->
4148
<div class="main-content">

0 commit comments

Comments
 (0)