简单地说：我想添加这些按钮到我的WordPress网站的用户切换无论是轻或暗模式。虽然它在那里工作得很好，但我似乎无法将这些代码正确地集成到我的网站中。
正如你所知道的，这只是我第二次真实的的经验，实现HTML，CSS和JS在一起，我第一次管理代码在WordPress中;如果我忽略了一些明显的东西，请提前道歉：-）
Buttons as they look on the website but clicking either does nothing
Where the Buttons are added in "body"
Format using the WP Site Editor

HTML

<!-- 
All that I changed with these two, here, was add id="". The rest is all Wordpress...

The First Button within the Header, using the Wordpress Site Editor, "Edit as HTML" -->

<div class="wp-block-button has-custom-font-size has-small-font-size" id="dark-mode-off"><a class="wp-block-button__link wp-element-button" style="border-radius:100px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">      </a></div>

<!-- The Second Button -->

<div class="wp-block-button has-custom-font-size has-small-font-size" id="dark-mode-on"><a class="wp-block-button__link wp-element-button" style="border-radius:100px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">      </a></div>

CSS

.wp-block-button {
    width: 8px;
    height: 8px;
    border: 1px solid white;
    border-radius: 50px;
    background-color: black;
    position: relative;
}

#dark-mode-on {
  background-color: black;
  border-color: black;
  transition: 0.2s ease-out;
}

#dark-mode-off {
  background-color: white;
  border-color: black;
  transition: 0.2s ease-out;
}

JS

const darkModeOnButton = document.getElementById('dark-mode-on');
const darkModeOffButton = document.getElementById('dark-mode-off');
const body = document.querySelector('body');

darkModeOnButton.addEventListener('click', () => {
  darkModeOnButton.style.backgroundColor = 'black';
  darkModeOnButton.style.borderColor = 'white';
  darkModeOffButton.style.backgroundColor = 'white';
  darkModeOffButton.style.borderColor = 'white';
  body.style.backgroundColor = 'black';
});

darkModeOffButton.addEventListener('click', () => {
  darkModeOnButton.style.backgroundColor = 'black';
  darkModeOnButton.style.borderColor = 'black';
  darkModeOffButton.style.backgroundColor = 'white';
  darkModeOffButton.style.borderColor = 'black';
  body.style.backgroundColor = 'white';
  
  darkModeOffButton.disabled = false;
  darkModeOnButton.disabled = false;
});

更多信息：

• 为了添加我的自定义代码，我使用“简单自定义CSS和JS”插件;每个部分内部链接。

Where the CSS and JS are added in "head"

• 我有两个class=".wp-block-button”元素，我使用Wordpress站点编辑器添加到我的站点的标题元素中;这两个都是我在CSS中设计的，使用这个插件。使用当前的代码，当点击一个按钮时，它应该改变两个按钮的样式以及背景颜色。这似乎在Codepen中正确工作，但无论出于何种原因，在Wordpress中都不会响应。初始CSS似乎正确应用，但点击任何一个按钮都不会做任何事情。

我尝试了：
我尝试在HTML中的不同位置插入部分代码，部分使用Google“Inspect”工具。我还尝试寻找其他“Dark-Mode”分步解决方案，以及stackoverflow上的其他一些类似措辞的问题，但到目前为止我没有尝试过真正有帮助;我觉得我缺少了一些基本的东西...
（抓住救命稻草，问题可能是我没有将Javascript文件排队到我的functions.php中;或者通常与我网站的PHP当前版本有关？我应该清空浏览器缓存吗？
我一直有点犹豫，进入和编辑我的主题文件本身，并希望该插件将工作得足够好…）
我不知所措;我不知道问题在哪里.再次，点击任何一个按钮都没有做什么，初始CSS似乎正确的样式，它在CodePen中工作得很好.有人能给我指出正确的方向吗？谢谢. =）