WordPress添加判断夜间暗黑模式(代码实现)

小初seo 网站建设评论1,408字数 3192阅读10分38秒阅读模式

首先简单的思路就是给主题样式表适配写一套黑色模板的css,主要是背景,图片和文字等适配。css是最复杂工程量最大的。

然后使用js控制切换,当切换至暗黑模式后class 调用适配暗黑的css,由于css层级优先关系就达到了暗黑的效果。

首先加入js代码:

你可以扔footer页脚,或创建js文件

<script type="text/javascript">
    //夜间模式www.pkak.cn
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;s*)nights*=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*)nights*=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*)nights*=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%);
}

因为本站使用了div全局所以过滤了body我的css修改例子,看一下应该就懂了。

<style>
.night #ceotheme{
    background: #111;
}
.night .nex_focuson_middle {
    border-bottom: 1px solid #111111;
}
.night .nex_focuson_Lsd {
    border-right: 1px solid #111111;
}
.night .searchWrapper.extend .searchBox {
    background: #111111;
}
.night .ceo-night-an {
    color: #fff !important;
}
.night .ceo-zhuanti-item a{
    background-color: #151617;
}
.night .ceo-zhuanti-item h2{
    color: #fff;
}
.night .link {
    border: 1px dashed #313131;
}
.night .ceo-zhuanti-item .ceo-zhuanti-item-thumb:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    background-image: -webkit-linear-gradient(top, rgba(117, 117, 117, 0.7) 0, #151617 100%);
    background-image: -o-linear-gradient(top, rgba(117, 117, 117, 0.7) 0, #151617 100%);
    background-image: linear-gradient(to bottom, rgba(117, 117, 117, 0.7) 0, #151617 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#ffffffff', GradientType=0);
    z-index: 10;
}
.night .ceo-single-weizhi{
    background-color: #151617;
    border: 1px solid #222;
    border-radius: 4px!important;
}
.night .ceo-fl-icon a{
    background-color: #151617;
    border: 1px solid #222;
}
.night .b-a {
		border: 1px solid #111111!important;
}
.night .b-b {
		border-bottom: 1px solid #111111!important;
}
.night .b-t {
		border-top: 1px solid #111111!important;
}
.night a, .ceo-link {
    color: #fff;
}
.night .navbar {
    background: #1d1f20;
}
.night .nav>ul>li>a {
    color: #fff;
}
.night .nav>ul>li .sub-menu li a:hover {
    color: var(--primary-color);
}
.night .nav>ul>li .sub-menu {
    background: #262626;
    border-top: 1px solid #262626;
}
.night .nav>ul>li .sub-menu li a {
    background: #1d1f20;
    color: #fff;
}
.night .header-info i {
    color: #fff;
}
.night .user-info {
    background: #151617;
}
</style>

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

<a href="javascript:switchNightMode()" rel="external nofollow"  class="wpkf" ceo-tooltip="开启/关闭夜间模式"><i class="iconfont icon-nightmode"></i></a>

 

 最后更新:2021-4-27
  • 本文由 小初seo 发表于 2021年4月25日18:26:38
  • 转载请务必保留本文链接:https://www.pkak.cn/web/210.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证