now in
— Web
DarkReader API
很早之前用的客户端暗色插件现在支持服务端调用了 DarkReader API 那么正好写一个设置来支持切换深浅色模式,以及持久化用户设置。DarkReader 真的非常方便,理论上默认设置都能很好自动渲染网页生成对应的 CSS,如果有不正常的地方自己微调一下就行。
Setting Page
首先得有一个开关或者设置,这里我选择自己写了一个 Setting 用于存储用户数据,还有保存到 localStorage 之类的的( ) 这里初始化了一个按键的开关,作为被绑定的载体。
Toggle
1
2
3
4
5
6
7
8
<div class="setting-item">
<label for="theme-toggle" class="setting-label"><strong>Dark Mode</strong>:</label>
<span class="setting-description">Toggle the dark theme. It will sync with your system theme settings the first time.</span>
<label class="switch">
<input type="checkbox" id="theme-toggle">
<span class="slider round"></span>
</label>
</div>
JavaScript
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
window.onload = function() {
const cookieStatus = localStorage.getItem('allowCookies') === 'true';
const themeStatus = localStorage.getItem('darkMode') === 'true';
document.getElementById('cookie-toggle').checked = cookieStatus;
document.getElementById('theme-toggle').checked = themeStatus;
// Load dark mode settings from localStorage or auto
const darkModeStatus = localStorage.getItem('darkMode');
if (darkModeStatus !== null) {
if (darkModeStatus === 'true') {
DarkReader.enable({ brightness: 100, contrast: 100, sepia: 0 });
} else {
DarkReader.disable();
}
} else {
DarkReader.auto({ brightness: 100, contrast: 90, sepia: 10 });
localStorage.setItem('darkMode', DarkReader.isEnabled().toString());
}
};
// Dark mode toggle
document.getElementById('theme-toggle').addEventListener('change', function() {
const isDarkMode = this.checked;
localStorage.setItem('darkMode', isDarkMode.toString());
if (isDarkMode) {
DarkReader.enable({ brightness: 100, contrast: 100, sepia: 0 });
} else {
DarkReader.disable();
}
});
上面的 JS 调用的 window.onload 只是为了设置界面可以正常生效,并且持久化和每次自动从 localStorage 加载按键信息所用的,具体的全局设置可以参考这样
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
<!DOCTYPE html>
<html lang="{{ config.language }}">
<head>
{% include "_partial/head.swig" %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<script>
(function() {
const darkModeSetting = localStorage.getItem('darkMode');
if (darkModeSetting === 'true') {
DarkReader.enable({
brightness: 100,
contrast: 100,
sepia: 0
});
}
else if (darkModeSetting === 'false') {
DarkReader.disable();
}
else {
DarkReader.auto({
brightness: 100,
contrast: 90,
sepia: 10
});
}
const isEnabled = DarkReader.isEnabled();
localStorage.setItem('darkMode', isEnabled.toString());
})();
</script>
<div class="container">
{% include "_partial/header.swig" %}
<div class="container-inner" style="display:none;">
<main class="main" id="main">
<div class="main-wrapper">
{% block main %} {% endblock %}
</div>
</main>
{% include "./_partial/footer.swig" %}
</div>
{% include "./_partial/tagcloud.swig" %}
</div>
{% include "_partial/_feature/common.swig" %}
</body>
</html>
这里我之前踩过坑,那就是在最开始调用这个 JS 会导致加载过早, 导致后面渲染出来的页面完全没有被应用深色模式,如果用 window.onload 会导致深色模式的一瞬间加载的时候实际上是浅色主题,等加载完后才执行的 API, 所以你应该把这段 JS 塞在 _layout.swig 或者你使用的框架的合适地方, 比如整体 Web Body( )