当前位置: 代码迷 >> 综合 >> dark-mode.min.js一款网站页面暗黑模式插件
  详细解决方案

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

热度:26   发布时间:2023-11-18 01:52:38.0

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();

@绝客博客

  相关解决方案