Wordpress：读者在浅色和深色主题之间切换

Question

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

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

Answer 1

我们真的需要更多信息......如果光/暗 CSS 只是通过向body或一些高级容器添加一个类来管理，你可以在 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>

Answer 2

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