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

[shuzijumin]

以 discuz 论坛为例：

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

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

<!-- Dark mode switcher -->
<script>
  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);
  })();
</script>

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

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

[fuzzsh]

支持自定义 css https://v2ex.com/settings

BTW 你是来推广自己的站吧🌚

[huluhulu]

垃圾，还屏蔽大陆访问