给WordPress-OneNav主题添加夜间/护眼模式

教程 2个月前 壳壳
304 0 0
最后更新于2022年3月20日,已超过66天没有更新,如果内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

食用方法

进入主题,首先第一步,在您的页脚文件: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>
版权声明:壳壳 发表于 2022年3月19日 下午7:14。
转载请注明:给WordPress-OneNav主题添加夜间/护眼模式 | 壳壳博客

相关文章

暂无评论

暂无评论...
壳壳博客一键登录开启个人书签等功能!