WordPress 纯代码实现暗黑模式极简教程
大部分朋友的WordPress站点都已支持 暗黑模式 了,今天 菜鸟站长 在这里系统的描述一下 暗黑模式 的逻辑和详细代码。
目前实现暗黑模式的方案有:
一、自动整体方案
Darkmode.js
一个自动出现的按钮,自动换色,自动的css相关颜色值已预设,貌似对 自定义 各方面设定有欠缺;
二、换色但无记忆
成功实现点击后换色(换色的相对应css需要自己写),但刷新页面后,换色消失,或者访问内页同样换色消失;
三、换色且记忆
就是第二方案的升级版,即点击按钮换色且记录cookie,刷新页面或去到内页均保持暗黑模式;该方案需要解决刷新页面时,短暂闪烁的问题。
四、换色记忆且支持时间段
在第三种方案的基础,增加了时间段控制,例:站点自动在晚6点到早6点期间启动暗黑模式。
思路整理
A、按钮准备,即点击切换暗黑模式的前端按钮一枚;
<div class="theme-switch" onclick="switchDarkMode()">🌓</div>
B、cooie预判断,在网页的<html>
的上面加入以下判断,此举意在解决刷新页面会出现短暂闪烁的问题,做预判。
<script>document.documentElement.classList.toggle('dark',localStorage.getItem("isDarkMode")==="1");</script>
C、js准备
// 变黑函数
function setDark() {
localStorage.setItem("isDarkMode", "1");
document.documentElement.classList.add("dark");
}
// 变白函数
function removeDark() {
localStorage.setItem("isDarkMode", "0");
document.documentElement.classList.remove("dark");
}
// switch按钮
function switchDarkMode() {
let isDark = localStorage.getItem("isDarkMode");
if (isDark == '1') {
removeDark();
} else {
setDark();
}
}
以上js部分没有采用大部分网上 教程 的在body上定义class的思路,原因是WordPress的body会添加 body_class();
这个wp自带函数,如果再在body定义class,会和整站的body命名冲突,所以js里采用了给html部分进行class名的切换,从而实现模式切换而更改class名。
D、css准备,此时就需要你对暗黑模式进行css编写了,在样式选择器前加上.dark
即可,适当配合!important
的使用
E、对图片的css暗色设置
.dark img {
filter: brightness(30%);
}
//滚动条
.dark ::-webkit-scrollbar{width:8px;background:#222;}
.dark ::-webkit-scrollbar-thumb{background:#333;}
::-webkit-scrollbar{width:8px;background:#ccc;}
::-webkit-scrollbar-thumb{background:#222;}
菜鸟站长 :绝壁好用
菜鸟站长推荐教程
看完你可能还会喜欢
![站长推荐——Pigcha 网络加速专业工具](https://www.80srz.com/usr/themes/cactus/images/pigcha.png)
![站长推荐——Pigcha 网络加速专业工具](https://www.80srz.com/usr/themes/cactus/images/pigcha.png)