阅读本文大约需要:2 分钟

时间调节

下面分享两种方法,一种是根据时间自动变换为夜间模式,另一种是按钮切换的方式。 首先加入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,防止页面闪烁。
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>"> 

最后调试CSS

部分内容回复可见

转载请注明来源:给WordPress网站添加护眼色 夜间模式功能 附时间与按钮两种方式