食用方法
进入主题，首先第一步，在您的页脚文件：footer.php上面加入以下js代码。
< script type = "text/javascript" > function switchNightMode() { var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0"; if (night == "0") { document.body.classList.add("night"); document.cookie = "night=1;path=/"; console.log("夜间模式开启") } else { document.body.classList.remove("night"); document.cookie = "night=0;path=/"; console.log("夜间模式关闭") } } (function() { if (document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === "") { if (new Date().getHours() > 21 || new Date().getHours() < 6) { document.body.classList.add("night"); document.cookie = "night=1;path=/"; console.log("夜间模式开启") } else { document.body.classList.remove("night"); document.cookie = "night=0;path=/"; console.log("夜间模式关闭") } } else { var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0"; if (night == "0") { document.body.classList.remove("night") } else { if (night == "1") { document.body.classList.add("night") } } } })(); </script>
加好后在您的页面body处加入php判断，这样当检测到cookie相关字段时直接输出body的class为night，已防止页面闪烁。在头部文件：header.php文件中加入以下代码
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
如果原中已有了class的话就将放在class=“”里面。
最后再将网站中所有需要变暗的地方调整其css，已达到变暗效果，具体css调整示例可看下方。
body.night 需要调整的区块{ background-color: #000000; color: #aaa; } body.night img { filter: brightness(30%); }
由于每个网站或者博客CSS的命名不一样，所以请根据自己的网站/博客CSS进行修改，大家可以通过右键“审查元素”来获取CLASS的名字。
每个CLASS的区块都要用“body.night 需要调整的区块”书写，如“body.night h2”、“body.night .post-tags”等。
这样当晚上9点到白天6点之间，网站打开时就自动会变成暗黑模式。当然，你也可以加一个按钮，来手动控制打开关闭暗黑模式。如下代码。
<a href="javascript:switchNightMode()" target="_self">Dark</a>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
爱导航，集网址、资源、资讯于一体的 书签导航，简约优雅的设计风格，全面的前端用户功能，简单的模块化配置，欢迎您的体验，导航看看小提示：按 Ctrl+D 可收藏本网页，方便下一次快速打开使用。本站仅为网址导航，网站来源于网络，对其内容不负任何责任，若有问题，请联系我们。
