Hola y gracias de antemano, me gustaría hacer un botón con modo oscuro y si haces clic en él, se convierte en modo oscuro y el botón se llama modo blanco, luego, cuando vuelves a hacer clic en él, se convierte en modo blanco y el botón se llama Modo oscuro de nuevo.
Código:
<!DOCTYPE html> <html> <head> <style> .page { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; } </style> </head> <body> <div class="page">Hello</div> <button onclick="myFunction()">dark mode</button> <script> function myFunction() { var element = document.page; element.classList.toggle("dark-mode"); } </script> </body> </html>Está intentando alternar la clase dark-mode en document.page , que no existe.
En su lugar, debería alternarlo en document.body .
<!DOCTYPE html> <html> <head> <style> .page { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; } </style> </head> <body> <div class="page">Hello</div> <button onclick="myFunction()">dark mode</button> <script> function myFunction() { var element = document.body; element.classList.toggle("dark-mode"); } </script> </body> </html> Para alternar solo la clase en el div , use querySelector :
<!DOCTYPE html> <html> <head> <style> .page { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; } </style> </head> <body> <div class="page">Hello</div> <button onclick="myFunction()">dark mode</button> <script> function myFunction() { var element = document.querySelector('div.page'); element.classList.toggle("dark-mode"); } </script> </body> </html> function myFunction() { var element = document.body; element.classList.toggle("dark-mode"); if (element.classList.contains("dark-mode")){ document.getElementById('btn').innerHTML = "Light Mode"; } else{ document.getElementById('btn').innerHTML = "Dark Mode"; } } .page { display:inline; background:#FFF; color: #121212; font-size: 25px; } .dark-mode, .dark-mode .page { background-color:#202020; color: #FFF; } <!DOCTYPE html> <html> <head> </head> <body> <div class="page">Hello</div> <br><br><br> <button onclick="myFunction()" id="btn">Dark mode</button> </body> </html>