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

小初seo

1135
文章

3
评论

2021年4月25日 18:26:38网站建设评论1,123 次浏览字数 3192阅读10分38秒阅读模式

文章目录[隐藏]

首先加入js代码：
- 你可以扔footer页脚，或创建js文件
其次在header页头的body加入php判断

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

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

首先加入js代码：

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

其次在header页头的body加入php判断

检测到cookie相关字段直接输出body class为night，防止页面闪烁。

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

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

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

相关文章

如何选择适合自己的WordPress主题？对比7B2和JustNews主题的优缺点

阿里云4核8G10M带宽云服务器支持多少人（用户）同时在线？

WordPress分类模式表设计详解：各个 Term 表之间的关系(干货文章)

一不小心忘记了WordPress管理员密码怎么办？WordPress找回管理员密码方法

免费开源「Wing简洁双栏主题」 wordpress主题分享

宝塔负载和CPU使用率状态100%时怎么解决？超详细解决教程

WordPress如何在文章页判断属于某个分类时显示指定广告代码（分类文章单独显示广告教程）

能否给百度统计代码的JS 加密(百度统计被刷广告)

wordpress判断当前文章的分类i_category

Notepad++中批量把空格替换换行符的方法介绍（如何用notepad++替换换行符）

发表评论

首先加入js代码：

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

其次在header页头的body加入php判断

检测到cookie相关字段直接输出body class为night，防止页面闪烁。

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

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

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

相关文章

发表评论

加入我们

立即登录

找回密码