WordPress添加夜间模式代码版[转载]

转载至郑永博客:https://xptt.com/653884.html?replytocom=292657

查看效果

 

将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>


OK,只要客户端时间是22点到6点之间,就自动切换到夜间模式,你也可以用下面的代码来弄一个按钮在页面上,方便随时切换。

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



[tip type="tip worning" ]

注意:添加的按钮优先权高于系统自动切切换,若点击按钮实现了夜间模式切换,则自动切换功能会暂停,直到你清除缓存后才会再次实现自动切换。

[/tip]

WordPress

wordpress实现私密评论无需插件

2020-3-4 11:52:19

WordPress

使用WP-China-Yes将WP站点与官方服务的通信切换到大陆节点

2020-3-8 13:00:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧