¡Quiero que el botón de modo oscuro cambie a css cuando haga clic en él, que en modo de espera el botón esté oscuro y en modo oscuro el botón esté claro!
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>He añadido comentarios en el código. El código se explica por sí mismo, todo lo que hice fue verificar si el botón está en modo oscuro o en modo claro. Si está en modo oscuro, cambie el contenido del texto a modo claro y también el color de fondo y viceversa
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>