网页增加亮暗主题切换按钮的方式

shuzijumin:

以 discuz 论坛为例：

后台 -> 界面 -> 导航设置 -> 顶部导航，添加新导航，名称：暗色主题，链接：#switch-theme

后台 -> 全局 -> SEO 设置 -> 其它 -> 其他头部信息，添加如下代码：

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


if (localStorage.getItem('darkEnabled') === 'true') {
  document.documentElement.style.backgroundColor = '#121212';
  document.documentElement.style.color = '#e0e0e0';
}
(function() {
    var darkScript = document.createElement('script');
    darkScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.58/darkreader.min.js';
    darkScript.onload = function() {
        var darkEnabled = localStorage.getItem('darkEnabled') === 'true';
        if(darkEnabled) {
            DarkReader.enable({
                brightness: 100,
                contrast: 90,
                sepia: 10
            });
        }
        function setupSwitchTheme() {
            var switchThemeLink = document.querySelector('a[href="#switch-theme"]');
            if (switchThemeLink) {
                switchThemeLink.textContent = darkEnabled ? '亮色主题' : '暗色主题';
                switchThemeLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    if(darkEnabled) {
                        DarkReader.disable();
                        switchThemeLink.textContent = '暗色主题';
                        darkEnabled = false;
                        localStorage.setItem('darkEnabled', 'false');
                    } else {
                        DarkReader.enable({
                            brightness: 100,
                            contrast: 90,
                            sepia: 10
                        });
                        switchThemeLink.textContent = '亮色主题';
                        darkEnabled = true;
                        localStorage.setItem('darkEnabled', 'true');
                    }
                });
            }
        }
        if(document.readyState === 'loading'){
            document.addEventListener('DOMContentLoaded', setupSwitchTheme);
        } else {
            setupSwitchTheme();
        }
    };
    document.head.appendChild(darkScript);
})();

这个方法适用于任何不支持暗色主题的亮色网站，只需在自己网页增加 href 为 #switch-theme 的 a 标签，然后将上述代码放到网页的 head 标签内即可

测试：点击 演示网站 左上角的按钮切换