给网站新增夜间模式

最近捣腾主题，晚上无意间用手机打开了博客，那刺眼，受不了，就求助了万能的搜索，你还别说，应有尽有，转过来收藏一下。

上代码：

第一步：首先，这段JS代码放在footer文件下，直接放在底部

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

注意：上边第3行的，6和20是指的早上6点和晚上8点，也就是晚上8点以后到早上6点以前这段时间是进入到夜间模式的，这个可以自行修改时间。

第二步：然后是css，这就存到你的默认style.css里就行

body.night, body.night #body, body.night .page_navi a.current {
    background-color: #263238!important;
	background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    color: #888282!important;
}
body.night .site-header , body.night #ilovewp-home-welcome{
	background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
}
body.night .site-aside-wrapper,body.night .site-content-wrapper{
	background:rgb(37,39,39);
}
body.night #content .post p a, body.night .floor {
    color: #af8f77;
}
body.night img {
    filter: brightness(30%);
}
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 #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;
}

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

<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">

把这个放在头部，你的body里。到此就大功告成了，到时间自动切换到夜间模式。

但是，你也要给用户一个自我选择的机会，人家就想亮亮堂堂的呢。

那就新增一句

<a href="javascript:switchNightMode()" target="_self">夜间模式</a>

这一句，找个明显的地方放起来。OK

2月26日进阶版：

改进了一下手动选择版：

将

<a href="javascript:switchNightMode()" target="_self">夜间模式</a>

修改为：

<a id="NightMode" href="javascript:switchNightMode()"><?php if($_COOKIE['night'] =='1'){echo"亮";}else{echo"暗";} ?></a>

然后给js里加入：

document.getElementById('NightMode').innerHTML='亮';

总体将js改为：

<script type='text/javascript'>
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 20 || new Date().getHours() < 6){
            document.body.classList.add('night');
            document.cookie = "night=1;path=/";
	    document.getElementById('NightMode').innerHTML='亮';
            console.log('夜间模式开启');
        }else{
            document.body.classList.remove('night');
            document.cookie = "night=0;path=/";
            document.getElementById('NightMode').innerHTML='暗';
            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=/"
	document.getElementById('NightMode').innerHTML='亮';
        console.log('夜间模式开启');
    }else{
        document.body.classList.remove('night');
        document.cookie = "night=0;path=/"
	document.getElementById('NightMode').innerHTML='暗';
        console.log('夜间模式关闭');
    }
}
</script>

这样就能实现自动换亮/暗并显示