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();
绝客BLog