很多朋友的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;}© 版权声明
版权声明
本文归原作者版权所有。未经授权允许，请勿转载、摘编或用于商业用途；如需引用，请注明来源并保留原文链接及出处。
THE END
暂无评论内容