dark-mode.min.js一款网站页面暗黑模式插件

绝客博客 浏览406

dark-mode.min.js一款网站页面暗黑模式插件:https://github.com/jakejarvis/dark-mode( 这是GitHub开源地址)

教程开始:dark-mode.min.js:cdn( https://unpkg.com/dark-mode-switcheroo/dist/dark-mode.min.js)  加载或者下载本地底部引入。

css文件:
  
  /* 默认模式 */
  body.light {
    background-color: #fff;
    color: #222;
  }
  body.light a {
    color: #06f;
  }

  /* 暗黑模式 */
  body.dark {
    background-color: #222;
    color: #fff;
  }
  body.dark a {
    color: #fe0;
  }

  /* The Toggle (TM) */
  .dark-mode-toggle {
    cursor: pointer;

    /* Hide the toggle initially if the user's JS is disabled: */
    
  }
html:
 <button type="button" class="dark-mode-toggle btn btn-dark p-1" >
                <i class="fa fa-moon-o"></i>               
</button>
js:
    // 夜间模式
    var dark_mode = function(){
      window.darkMode.init({
        toggle: document.querySelector(".dark-mode-toggle"),
        classes: {
          light: "light",
          dark: "dark",
        },
        default: "light",
        storageKey: "example_dark_mode_pref",
        onInit: function (e) {
          e.style.visibility = "visible";
          console.log("Toggle is visible now that we know user has JS enabled.");
        },
        onChange: function (t) {
          console.log("Set theme to " + t);
        }
      });
    }
    dark_mode();
 End 

分享