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

以 discuz 论坛为例：

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

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

1. <!-- Dark mode switcher -->
   
2. <script>
   
3.   if (localStorage.getItem('darkEnabled') === 'true') {
   
4.     document.documentElement.style.backgroundColor = '#121212';
   
5.     document.documentElement.style.color = '#e0e0e0';
   
6.   }
   
7.   (function() {
   
8.       var darkScript = document.createElement('script');
   
9.       darkScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.58/darkreader.min.js';
   
10.       darkScript.onload = function() {
    
11.           var darkEnabled = localStorage.getItem('darkEnabled') === 'true';
    
12.           if(darkEnabled) {
    
13.               DarkReader.enable({
    
14.                   brightness: 100,
    
15.                   contrast: 90,
    
16.                   sepia: 10
    
17.               });
    
18.           }
    
19.           function setupSwitchTheme() {
    
20.               var switchThemeLink = document.querySelector('a[href="#switch-theme"]');
    
21.               if (switchThemeLink) {
    
22.                   switchThemeLink.textContent = darkEnabled ? '亮色主题' : '暗色主题';
    
23.                   switchThemeLink.addEventListener('click', function(e) {
    
24.                       e.preventDefault();
    
25.                       if(darkEnabled) {
    
26.                           DarkReader.disable();
    
27.                           switchThemeLink.textContent = '暗色主题';
    
28.                           darkEnabled = false;
    
29.                           localStorage.setItem('darkEnabled', 'false');
    
30.                       } else {
    
31.                           DarkReader.enable({
    
32.                               brightness: 100,
    
33.                               contrast: 90,
    
34.                               sepia: 10
    
35.                           });
    
36.                           switchThemeLink.textContent = '亮色主题';
    
37.                           darkEnabled = true;
    
38.                           localStorage.setItem('darkEnabled', 'true');
    
39.                       }
    
40.                   });
    
41.               }
    
42.           }
    
43.           if(document.readyState === 'loading'){
    
44.               document.addEventListener('DOMContentLoaded', setupSwitchTheme);
    
45.           } else {
    
46.               setupSwitchTheme();
    
47.           }
    
48.       };
    
49.       document.head.appendChild(darkScript);
    
50.   })();
    
51. </script>

复制代码

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

不错
总算有暗黑模式了