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>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>