B2主题专用暗黑模式cookie版本

黑夜暗黑模式网上的大部分都是简单的css代码,不能完全被css渲染,就会显得特别的乱而且没啥效果,下面整理了一下一套B2专用的暗黑代码

教程开始

首先加入js代码,你可以扔footer页脚:

<script type="text/javascript">
    //夜间模式
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){//只要客户端时间是22点到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('夜间模式关闭');
    }
}
</script>

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

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

<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">

最后调试CSS  代码放到子主题根目录的style.cc文件里头

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

按钮调节

这个按钮看个人喜欢建议放在顶部菜单栏或者侧边栏

<a href=”javascript:switchNightMode()” target=”_self”>查看效果</a>

给TA打赏
共{{data.count}}人
人已打赏
B2PRO美化

B2主题菜单栏去顶部效果

2021-7-5 17:55:36

B2PRO美化B2教程

B2主题代码高亮代码-美化版

2021-7-8 18:29:40

⚠️
wp百科网上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 aqiang-212@qq.com 或点击右侧 私信:wpbkw 反馈,我们将尽快处理。
6 条回复 A文章作者 M管理员
  1. BAICAI

    黑夜无论怎样悠长,白昼总会到来

  2. BAICAI

    dasdadamk

  3. BAICAI

    测试

  4. BAICAI

    就会激发几号放假啊

  5. BAICAI

    从撒旦发射点

  6. BAICAI

    但是发给我

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索