I want the dark mode button to change to css when you click on it, that in wait mode the button is dark and in dark mode the button is light!

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>