WordPress 纯代码实现暗黑模式极简教程

发布者：菜鸟站长发布日期：2023-12-29 更新日期：2023-12-29 人气指数：758

大部分朋友的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;}

菜鸟站长：绝壁好用

本文检索关键词：WordPress教程 , 暗黑模式

菜鸟站长推荐教程

WordPress 站点配置谷歌 Gmail API 邮件接口步骤

这里默认你已经登陆上用于配置网站发送邮件的谷歌邮箱账号，从 Gmail API 官方链接进入，出现创建项目页面，点击 “继续”。

更新日期：2024-01-06759 人关注

WordPress强制文章图片尺寸为全尺寸

最近收到了一个奇怪的bug反馈，就是WordPress插入的文章图片无法显示？接下来，我们来看看菜鸟站长是如何解决的：

更新日期：2023-12-29759 人关注

WordPress最新版程序下载

WordPress最新版下载，WordPress是全球最流行的网站程序，世界上超过30%的网站由WordPress搭建。

更新日期：2023-12-22759 人关注