现在位置: 首页 / 网站建设 / B2主题美化 / 正文

B2主题美化之夜间/黑夜模式自动切换版（2022）

前几天微信群有粉丝让给老白博客增加一个黑夜模式，故去找了一圈教程，发现还挺多的，故老白我找了一个进行了简单的修改，适配到了现在网站里面。现在就把这个教程写出来，作为一个B2主题美化记录：WordPress网站B2主题夜间/黑夜模式自动切换版（2022），添加位置分别为电脑端右下角、手机端顶部菜单栏右上角。

1.演示效果

以下分别是是手机端与电脑端的演示效果老白博客https://www.xcbtmw.com/17946.html

B2主题美化之夜间/黑夜模式自动切换版（2022）

移动端切换按钮右上角（已设置pc端隐藏）

B2主题美化之夜间/黑夜模式自动切换版（2022）

电脑端切换按钮-右下角（移动端隐藏）

2.黑夜模式功能代码

代码来自许天和许先生两位站长，感谢他们的分享，我仅是写了一个使用说明书而已

css代码：部分样式可能要根据自己网站的情况调整

https://img.ahap.cn/file/ahap/CSS/b2/quyl.css

js代码：不用修改老白博客https://www.xcbtmw.com/17946.html

 //夜间模式-https://www.xcbtmw.com/17946.html
(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');
}
}
})();
//夜间模式切换-https://www.xcbtmw.com/17946.html
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('夜间模式关闭');
}
}

3.B2主题集成黑夜模式

关于B2主题黑夜模式的集成，看到好些教程，极其繁琐，看得我头晕，我个人理解的过程就是：添加黑夜模式功能——将功能摆放在合适的位置。

3.1引入黑暗模式

首先是引用功能到B2主题，将上面的css文件和js，保存成文件引入到footer.php，注意文件位置（我这里是网站根目录），放在</body>标签之前即可

<link rel="stylesheet"href="/nightqita.css">
<script type="text/javascript" src="/nightqita.js"></script>

3.2电脑端右下角

修改位置：Modules/Templates/Footer.php，老白博客https://www.xcbtmw.com/17946.html

（效果大家看前面我放的预览图，此处我是将二维码给替换了，大家也可以自行定义）

 <!--切换亮度修改byxcbtmw.com--> 
<div class="bar-item bar-qrcode"><a href="javascript:switchNightMode()" target="_self">
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-liangdu"></use></svg>
</a>
</div>

B2主题美化之夜间/黑夜模式自动切换版（2022）

3.3 手机端右上角

修改位置：Modules/Templates/Header.php，我此处新定义了一个，方便设置电脑端隐藏，在代码header-banner-right normal-banner-right下方

 <div class="night-xcbtmw"><a href="javascript:switchNightMode()" target="_self"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-liangdu3"></use></svg></a></div>

B2主题美化之夜间/黑夜模式自动切换版（2022）

CSS修改一下位置和设置电脑端隐藏（添加在style.css文件中即可）

/*
* this for night-xcbtmw.com
*/
.night-xcbtmw {
position: relative;
right: 6px;
display: flex;
}
.night-xcbtmw{
display: none;
}
@media (max-width: 767px) {
.night-xcbtmw{
display: block !important;
}
}

以上就是老白博客@老白分享的B2添加黑夜模式的教程，更多B2主题美化的教程在文末标签。

WordPress教程合集：https://www.xcbtmw.com/jianzhan