时间戳

首页 > 解决方案 > 如何在 Wordpress 主题的定制器中添加暗模式选项？（无插件）

wordpress - 如何在 Wordpress 主题的定制器中添加暗模式选项？（无插件）

问题描述

我开发了一个wordpress主题。我想在定制器中添加暗模式选项。我想用组合框做出这个选择。选择黑模式时，足以在身体元素中添加名为Dark的类。Likewise, when the light mode is selected, it is enough to add the light class named in the body element. 我怎样才能做到这一点？（我可以用 css 完成剩下的工作。）

标签： wordpresswordpress-theming

解决方案

你的问题有点含糊，我想你是说你正在使用插件来处理黑暗模式或夜间模式，但我不确定......使用插件来处理夜间模式是不必要的。

就位，夜间模式相当简单，我们想将一个 css 类（我们称之为类.night）添加到我们的 body 标签中。在用户单击时，我们想要切换 2 个不同的状态。我们当前的切换状态需要保存为一个LocalStorage项目。完成此操作后，我们将为 css 中的每个部分、div 和任何其他内容定义适当的颜色。让我们开始吧。

大多数主题都在使用jQuery（一个 JS 库），这将是唯一的要求。

$(document).ready(function () {
    null != localStorage.getItem("state") && (localStorage.settingNight, $("body").toggleClass("night"), $("#toggle").toggleClass("selected")),
        $("#toggle").click(function () {
            $("body").toggleClass("night"), $("#toggle").toggleClass("selected"), $("#toggle").hasClass("selected") ? localStorage.setItem("state", "true") : localStorage.removeItem("state");
        });
});

这里我们定义了多个css类和id：

  • #toggle, 这是我们的按钮。他们与.selected类一起定义了LocalStorage状态项。
  • .night，我们使用.nightcss 类为每个部分、div 和任何其他内容应用适当的颜色。
  • '.selected'，我们使用'.selected' css 类来知道我们处于哪个状态。我们还可以将自定义样式应用于我们的#toggle按钮。

我们html现在可以添加以下内容：

<button id="toggle">Nightmode</button>

这是我们的切换按钮，当接收到用户点击时，它会切换状态。

在我们的 css 中，我们可以自定义适当的颜色：

.selected{background-color:#f17d3b!important;border-color:#f17d3b!important;}
body.night,
body.night html{background-color:#1d1e22!important;}

在这里，我们为每个部分、div、文本等定义颜色。We use body.night .classto target our classes behaviours when the night state is selected.

最后，我制作了一个简单的 codpen 和一个工作示例，让您更轻松地开始！在此示例中，我使用的是 Bootstrap 框架，这是不必要的。
来源@https ://codepen.io/amarinediary/pen/poErgVw
感谢LocalStorage，我们的浏览器记住了夜间状态。

推荐阅读