WordPress纯代码实现暗黑模式-阿宅学院

很多朋友的WordPress站点都已支持暗黑模式了，百度一下更是一堆的教程可阅，今天阿宅在这里顺便整合的描述一下其逻辑和详细代码。

目前实现暗黑模式的方案有：

一、自动整体方案

Darkmode.js 就是一个按钮，自动换色，css相关颜色值已预设，貌似对自定义颜色设定有欠缺；

二、换色但无cookie

成功实现点击后换色（换色的相对应css需要自己写），但刷新页面后，换色消失，或者访问内页同样换色消失；

三、换色且记忆

就是第二方案的升级版，即点击按钮换色且记录cookie，刷新页面或去到内页均保持暗黑模式；该方案需要解决刷新页面时，短暂闪烁的问题。

四、换色记忆且支持时间段

在第三种方案的基础，增加了时间段控制，例：站点自动在晚6点到早6点期间启动暗黑模式。

思路整理

一、按钮准备，即点击切换暗黑模式的前端按钮一枚；

<a href="javascript:switchdarkMode()" class="theme-switch"></a>

二、cooie预判断，在网页的<html>内加入以下判断，此举意在解决刷新页面会出现短暂闪烁的问题，做预判。

class="<?php if ($_COOKIE['dark'] == '1') { echo 'dark'; } else { } ?>"

三、js准备，2个部分，先是按钮切换，其次是定时启动暗黑模式

//切换暗黑模式function switchdarkMode(){    var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';    if(dark == '0'){        document.documentElement.classList.add('dark');        document.cookie = "dark=1;path=/"        console.log('夜间模式开启');    }else{        document.documentElement.classList.remove('dark');        document.cookie = "dark=0;path=/"        console.log('夜间模式关闭');    }}//定时暗黑模式(function(){    if(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){        if(new Date().getHours() > 22 || new Date().getHours() < 6){            document.documentElement.classList.add('dark');            document.cookie = "dark=1;path=/";            console.log('夜间模式开启');        }else{            document.documentElement.classList.remove('dark');            document.cookie = "dark=0;path=/";            console.log('夜间模式关闭');        }    }else{        var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';        if(dark == '0'){            document.documentElement.classList.remove('dark');        }else if(dark == '1'){            document.documentElement.classList.add('dark');        }    }})();

以上js部分没有采用大部分网上教程的在body上定义class的思路，原因是WordPress的body会添加 body_class();这个wp自带函数，如果再在body定义class，会和整站的body命名冲突，所以js里采用了给html部分进行class名的切换，从而实现模式切换而更改class名。

四、css准备，此时就需要你对暗黑模式进行css编写了，在样式选择器前加上.dark即可，适当配合!important的使用

五、对图片的css暗色设置

.dark img {    filter: brightness(30%);}

网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
分享是一种美德，当你分享时请你附带上本文链接。

THE END

技术教程
# WordPress # 代码 # 暗黑模式

WordPress纯代码实现暗黑模式