为什么 JavaScript 不能使用深色模式?

why doesn't JavaScript work with dark mode?

我希望当你点击它时,暗模式按钮变为css,在等待模式下按钮是暗的,在暗模式下按钮是亮的!

var toggleButton = document.getElementById('mode-toggle')
var isDarkMode = false;

function myFunction() {
  isDarkMode = !isDarkMode;
  document.querySelectorAll('div.scrollseite,div.scrollseite2').forEach(e => e.classList.toggle('dark-mode'))
  document.querySelectorAll('div.btndarkmode').forEach(e => e.classList.toggle('btnwhitemode'))
  toggleButton.innerHTML = isDarkMode ? 'Light mode' : 'Dark mode'
}
.btndarkmode {
  background-color: #36393F;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  font-size: 100%;
  font-weight: bold;
  position: fixed;
}

.btndarkmode:hover {
  background-color: #32353B;
  color: gray;
}

.btnwhitemode {
  background-color: white;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  font-size: 100%;
  font-weight: bold;
  position: fixed;
}

.btnwhitemode:hover {
  background-color: white;
  color: gray;
}

.dark-mode {
  background-color: #36393F !important;
  color: white !important;
}
<button onclick="myFunction()" class="btndarkmode" id="mode-toggle">Dark mode</button>

我在代码中添加了注释。代码是不言自明的,我只是检查按钮是处于暗模式还是亮模式。如果是深色模式,将文本内容更改为浅色模式,背景颜色也更改为浅色模式,反之亦然

var toggleButton = document.getElementById('mode-toggle')

function myFunction() {
  // To Check if element is in Darkmode
  if(toggleButton.textContent === "Dark mode") {
    toggleButton.textContent = "Light mode"
    toggleButton.style.background = "#eee"
  return
  }
  
  // To Check if element is in Lightmode
   if(toggleButton.textContent === "Light mode") {
     toggleButton.textContent = "Dark mode"
     toggleButton.style.background = "#333"
   return
   }
}
.btndarkmode {
  background-color: #36393F;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  font-size: 100%;
  font-weight: bold;
  position: fixed;
}

.btndarkmode:hover {
  background-color: #32353B;
  color: gray;
}

.btnwhitemode {
  background-color: white;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  font-size: 100%;
  font-weight: bold;
  position: fixed;
}

.btnwhitemode:hover {
  background-color: white;
  color: gray;
}

.dark-mode {
  background-color: #36393F !important;
  color: white !important;
}
<button onclick="myFunction()" class="btndarkmode" id="mode-toggle">Dark mode</button>