7B2 B2主题美化 增加夜间模式

由于之前用的主题自带夜间模式，而换到7B2主题后少了这个功能感觉有点不适应，恰巧找到了guhuan大佬写的一篇教程，通过大佬的帮助，完美实现了夜间模式功能。这里也给大家分享一下本人在使用这个教程时遇到的一些问题以及解决方法。

写在前面的话：

• 1、首先，您的b2主题必须设置为社交类型菜单（此暗黑模式仅仅适配了此菜单，如果你想使用其他类型菜单可以参考night_style.css文件末尾的方法进行修改）
• 2、按照此教程修改完成后，会在侧边栏添加一个按钮进行模式切换。
• 3、本教程是以子主题部署为主。 如需修改父主题文中会特别标明。

第一步 引入本站图标和记录夜间开启状态

打开b2子主题目录下的header.php文件，或前往b2主题后台→常规设置添加如下代码。

1. <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2526599_atm7o7amjx6.css"/>

同样在b2子主题目录下的header.php文件body下方添加代码。

1. <!--夜间模式开始-->
2. <script src="//at.alicdn.com/t/font_2526599_atm7o7amjx6.js"></script>
3. <script type="text/javascript">
4. (function(){
5. if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
6. if(new Date().getHours() > 20 || new Date().getHours() < 0.1){
7. document.body.classList.add('night');
8. document.cookie = "night=1;path=/";
9. }else{
10. document.body.classList.remove('night');
11. document.cookie = "night=0;path=/";
12. }
13. }else{
14. var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
15. if(night == '0'){
16. document.body.classList.remove('night');
17. }else if(night == '1'){
18. document.body.classList.add('night');
19. }
20. }
21. })();
22. function switchNightMode(){
23. var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
24. if(night == '0'){
25. document.body.classList.add('night');
26. document.cookie = "night=1;path=/"
27. }else{
28. document.body.classList.remove('night');
29. document.cookie = "night=0;path=/"
30. }
31. }
32. </script>
33. <!--夜间模式结束-->

第二步 侧边栏图标切换

打开b2子主题目录下的child.js，添加如下代码。

1. /*夜间模式按钮切换*/
2. $("#ls").click(function () {
3. if ($(this).hasClass("b2-baitian-qing")) {
4. $(this).removeClass("b2-baitian-qing")
5. $(this).addClass("icon-tianqiyubao24")
6. } else if ($(this).hasClass("b2-yewan")) {
7. $(this).removeClass("b2-yewan")
8. $(this).addClass("b2-baitian-qing")
9. }
10. })

第三步 添加侧边栏按钮

打开b2父主题目录下b2/Modules/Templates/Footer.php文件，如果您的这个文件未修改的话，就在大约372行下面添加如下代码。具体请看图，找出规律即可，但是要记住的是，这个文件是不能复制到子主题进行修改的哦。

1. <div class="bar-item switch-theme">
2. <a id="theme" href="javascript:switchNightMode()" target="_self">
3. <i id="ls" class="muyu b2-baitian-qing"></i>
4. <span class="bar-item-desc">夜间模式</span></a>
5. </div>

第四步 下载样式文件等并引入至网站（此处认真阅读~）

1 下载本文文末的压缩包文件

2 在子主题根目录新建Assets文件夹（注意区分大小写）

3 将压缩包内的kuvnlwhlqol.css文件上传至Assets文件夹下

4 在Assets文件夹下新建css文件夹 （注意区分大小写）

5 将压缩包内的night_style.css上传至css文件夹下

6 在子主题根目录下的functions.php文件下，加入如下代码即可

1. wp_enqueue_style( 'child-night_style', B2_CHILD_URI.'/Assets/css/night_style.css' , array() , B2_VERSION, 'all');

其他事项

1 如果设置好了之后图标显示不出来请修改图标

可以修改成你自己的iconfont图标，也可以修改成春哥的iconfont图标；

2 单纯的黑暗需要更改色调

（但也不一定按照这里的色调哦，只是建议更改）

网站主色调：#e55039

网站背景颜色：#1b1d1f

顶部背景颜色：#1b1d1f

顶部文字颜色：#fffbf0

底部第一层背景颜色：#1b1d1f

底部第一层文字颜色：#fffbf0

底部第二层背景颜色：#1b1d1f

底部第二层文字颜色：#fffbf0

原文链接：https://www.gcz.mx/3129.html