WordPress添加判断夜间暗黑模式（代码实现）

小初seo • • 网站建设 • 55 阅读

首先简单的思路就是给主题样式表适配写一套黑色模板的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>

 

版权声明：
作者：小初seo
链接：https://www.pkak.cn/web/210.html
来源：小初客栈
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭