全百科精品资源分享
免费优质资源下载平台

给WordPress网站添加护眼色 夜间模式功能 附时间与按钮两种方式

播放按钮
全百科网免费发布推广信息
文章目录

因为晚上关灯后看网站的文章确实刺眼,当然也可以调节手机亮度,但确实很少人会在关灯后看手机,对眼睛伤害很大,所以想给博客主题添加夜间模式得功能,本文教你怎么实现。

下面分享两种方法,一种是根据时间自动变换为夜间模式,另一种是按钮切换的方式。

时间调节

首先加入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

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

body.night xxx{
    background-color: #263238;
    color: #aaa;
}
body.night img {
    filter: brightness(30%);
}

我的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>

只要客户端时间是22点到6点之间,就自动切换到夜间模式。

按钮调节

你也可以用下面的代码来弄一个按钮在页面上,方便随时切换。

<a href="javascript:switchNightMode()" target="_self">查看效果</a>

结束,前面简单,后面css部分比较费时一些,如果你的主题够简单,那也很快,不然的话就得考验你耐心了。

Premium WordPress Themes Download
Premium WordPress Themes Download
Free Download WordPress Themes
Premium WordPress Themes Download
free online course
download lenevo firmware
Free Download WordPress Themes
free download udemy paid course

搜一下 获取更多

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0)
全百科网 » 给WordPress网站添加护眼色 夜间模式功能 附时间与按钮两种方式
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址