【7B2主题美化】暗黑模式带开关适应B2Pro_4.1.2

效果图

教程

• 头部位置增加按钮方法

<strong>b2/Modules/Templates/Header.php 884行左右插入代码</strong>

<div data-title="切换昼夜" class="user-tips"><button onclick="switchNightMode()"><i id="lmtdcn" class="lmtd bd-yewanshuimian"></i></button></div>

后台b2主题-常规设置-头部HTML标签

<script type="text/javascript" src="//at.alicdn.com/t/font_3133075_wsm2usco9v.js"></script> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_3133075_wsm2usco9v.css" /> <script type="text/javascript" src="/pic/jquery.min.js"></script>

自己的子主题style.css

子主题的child.js加入代码

/*夜间模式开始*/(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=/";
                $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
           
        }else{
            document.body.classList.remove('night');
              $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
            document.cookie = "night=0;path=/";
          
        }
    }else{
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.body.classList.remove('night');
          $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
          
    }else if(night == '1'){
        document.body.classList.add('night');
            $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
         
        }
    }
    })();
    function switchNightMode(){
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.add('night');
            $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
            document.cookie = "night=1;path=/"
          
        }else{
            document.body.classList.remove('night');
            $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
            document.cookie = "night=0;path=/"
            
        }
    }
    // 页面宽度按钮
    (function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
            document.body.classList.add('night');
                $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
            document.cookie = "night=1;path=/";
        }else{
            document.body.classList.remove('night');
              $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
            document.cookie = "night=0;path=/";
        }
    }else{
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.body.classList.remove('night');
          $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
    }else if(night == '1'){
        document.body.classList.add('night');
            $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
        }
    }
    })();
    function switchwidth(){
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.add('night');
                $(lmtdcn).removeClass("bd-taiyang-");
            $(lmtdcn).addClass("bd-yewanshuimian");
            document.cookie = "night=1;path=/"
        }else{
            document.body.classList.remove('night');
              $(lmtdcn).removeClass("bd-yewanshuimian");
            $(lmtdcn).addClass("bd-taiyang-");
            document.cookie = "night=0;path=/"
        }
    }
 
/*夜间模式结束*/

有的用户浏览器闪白问题修改B2-header.php第16行

<body <?php body_class(b2_get_option('template_top','top_type')); ?>>

替换为

最后在网站根目录放入pic文件夹，已上传该pic文件资源。