WordPress添加夜间模式cookie版

6年前 (2018-11-13) | 21,686 views | 33 条评论 | 本文共3281个字

这两天突然聊起博客主题带夜间模式，瞬间一只夜猫从脑后飘过，关灯后看文章确实刺眼，当然也可以调节手机亮度，但确实很少人会在关灯后看手机，对眼睛伤害很大。

本来这个功能无需折腾，比如腾讯浏览器手机版就有夜间模式，任何网站都可以瞬间变成夜间模式，效果也很好~ 但是！好吧，我们的个人博客是体贴到极致，不折腾不铁血。

原以为挺简单的，只需要搞两个CSS，互相切换一下就OK，后来发现这还得用到cookie，否则刷新一下就又恢复了，好吧，其他人一定搞过，既然有人做了，就不用再费脑子了。

搜了一下，发现有两种方法，第一种用遮的，懒人法，效果并不好，第二种就是通过JS+CSS控制，肯定选这种了，及时是这样，也很难搜到好的教程方法。

经过一番查找，终于找到猫与向日葵博客分享的这个方法：传送门！OK，废话不说了，点击看本站效果：查看效果。

由于原文不适合新手，我特意重新整理如下：

首先加入js代码，你可以扔footer页脚：

<script type="text/javascript">
//夜间模式
(function(){
if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
if(new Date().getHours() > 22 || 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');
}
}
})();
//夜间模式切换
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('夜间模式关闭');
}
}
</script>

其次在header页头的body加入php判断，检测到cookie相关字段直接输出body class为night，防止页面闪烁。

最后，调试CSS，body.night xxx ，xxx覆盖替换的css样式，body.night img 是把图片降低亮度，有些地方图片如果没有降低亮度，那么也像前面那样加入。

我的css修改例子，看一下应该就懂了。

<style>
body.night, body.night #body, body.night .page_navi a.current {
background-color: #263238!important;
color: #888282!important;
}
body.night #sidebar, body.night .next-page a {
background-color: #263238;
color: #888282;
}
body.night #content .post p a, body.night .floor {
color: #af8f77;
}
body.night .shang {
color: #263238;
}
body.night .shang {
background-color: #ab9a6d;
}
body.night img, body.night .icon_qq, body.night .icon_facebook, body.night .icon_rss, body.night .icon_weixin, body.night .icon_github, body.night .bozhugravatar a, body.night .left-col {
filter: brightness(50%);
}
body.night a, body.night a:link, body.night a:visited {
color: #989292;
}
body.night #comments form textarea, body.night #comments form input {
background-color: #263238;
color: #888282;
}
body.night #content .menufeng {
border-bottom: 1px solid #989292;
}
body.night #footer, body.night #xgwz, body.night #comments {
border-top: 1px solid #989292;
}
body.night #comments form textarea, body.night #comments form input, body.night #shangerweima {
border: 1px solid #989292;
}
body.night #nav .menu ul{
background: #3e4c52;
}
</style>