给网站新增夜间模式

玩代码  1年前 (2021-02-25)     1,157    本文共计3701个字,预计阅读时长13分钟。  

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

上代码:

第一步:首先,这段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>

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

 

 

本文由:龙哥 发表于 1年前 (2021-02-25),共3701字
版权声明:①欢迎转载但请注明出处。②如涉及版权联系(izhailong#qq.com)删除!
转载请注明:给网站新增夜间模式   ||   https://www.izhailong.com/246.html

暂无评论

暂无评论...