why doesn't JavaScript work with dark mode?

Question

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>

You don't have to add extra characters if it says that it is less words than code, just ignore it and press post. — Proking73Questioneer, Nov 20 '21 at 19:28
where is remaining HTML because you have used `div.scrollseite,div.scrollseite2` ? — DecPK, Nov 20 '21 at 19:28
Dude there is no `div.btndarkmode`, It should be `button.btndarkmode` — DecPK, Nov 20 '21 at 19:32

Web Developer · Accepted Answer · 2021-11-21T07:46:40.370

I have added comments in the code. The code is self-explainable, all I just did is to check if the button is on dark mode or light mode. If it is on dark mode, change the text content to light mode and also background color and vice versa

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>

Writing an answer without any explanation is not that helpful. You should explain which parts are important and why. — t.niese, Nov 20 '21 at 21:21
I have added comments in the code. The code is self-explainable, all I just did is to check if the button is on dark mode or light mode. If it is on dark mode, change the text content to light mode and also background color and vice versa — Web Developer, Nov 20 '21 at 23:04

why doesn't JavaScript work with dark mode?

1 Answers1