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