css - Wordpress:读者在明暗主题之间切换

Question

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

我是 wordpress 的新手，因此不知道如何操作。如果有人可以提供有关如何实现它的详细演练，将不胜感激。谢谢!

Answer 1

我们确实需要更多信息...如果仅通过向 body 或某些高级容器添加类来管理浅色/深色 CSS，您只需将按钮作为点击事件的目标在 javascript 中更改主体类或任何其他需要更改的内容。

另请注意，这并不是真正特定于 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>