Wordpress：读者在明暗主题之间切换答案

【问题标题】：Wordpress: readers changing between light and dark themeWordpress：读者在明暗主题之间切换
【发布时间】：2018-02-27 00:01:09
【问题描述】：

您好，我想在我的 wordpress.org 网站上创建一个按钮，允许读者在浅色（默认）和深色主题模式之间切换。我已经使用简单的 css 插件为我的深色主题创建了一个按钮短代码和所需的 csscode，但不知道如何将它们关联在一起。

我对 wordpress 很陌生，因此不知道该怎么做。如果有人可以提供有关如何实现它的详细演练，将不胜感激。谢谢！

【问题讨论】：

标签： css wordpress

【解决方案1】：

我们真的需要更多信息...如果只是通过向body 或一些高级容器添加一个类来管理浅色/深色 CSS，您只需在 javascript 中使用单击事件定位按钮并更改body 类或其他需要更改的内容。

还请注意，这并不是真正的 WordPress 特定的，它更像是一个通用的 javascript 或 CSS 问题。

这里有一些普通的 javascript 可以帮助您入门：

document.getElementById("my-button").onclick = function () {
    var container = document.getElementById("themeable");
    
    if( container.classList.contains("dark") ){
        container.classList.remove("dark");
    } else {
        container.classList.add("dark");
    }
};

.container {
  margin: 20px;
  box-shadow: 0 15px 25px -10px rgba(0,0,0,.5);
  background: #eee;
  padding: 20px;
  text-align: center;
  color: #000;
}

.dark {
  background: #323138;
  color: #fff;
}

<div class="container" id="themeable">
 I have two themes!
 
 <a href="#" id="my-button">Change Theme</a>
</div>

【讨论】：

【解决方案2】：

仅使用 js 事件侦听器来切换类名的问题是，当您在暗模式下刷新页面时，您可能会遇到无样式内容的轻微闪烁。 2020年，有一个优秀的插件可以在WordPress中添加夜间模式开关。检查WP Night Mode 插件。如果您正在寻找没有插件的自定义解决方案，我建议您也阅读以下文章：Switching off the lights - Adding Dark Mode to WordPress。

【讨论】：