Estoy tratando de obtener ayuda con algunas funciones de los botones. Hasta ahora lo tengo para que la imagen y el color de fondo cambien cuando se hace clic en el botón de clic. Estoy tratando de hacer que cuando haga clic en él, todo el sitio web cambie a un "modo oscuro" con colores más oscuros y texto más brillante. Donde estoy luchando es con el relleno de la imagen y el título. Aquí está el código hasta ahora.
<!doctype html> <html> <head> <style> .title {font-size: 50px; text-align: center; background-color: #C1C1C1; border-radius: 20px; font-family:arial; color: #00486B;} .img {background: coral; width: 500px; padding: 30px; margin-left: auto; margin-right: auto; display: block;} .body {padding: 25px; background-color: white; color: black; font-size: 25px;} .dark-mode {background-color: black; color: white;} .main {text-align: center; font-size; 50px; border-radius: 20px; font-family: arial; color: #00486B;} </style> <script> function myFunction(){ var element = document.body; element.classList.toggle("dark-mode")} function changeImage(){ var image = document.getElementById('myImage'); if (image.src.match("skeletons.jpg")) {image.src = "joseph.jpg";} else {image.src= "skeletons.jpg";}} </script> <title>Java</title> </head> <body class="main"> <h1 class="title">Toggle Display</h1> <img src="skeletons.jpg" class="img" id="myImage"> <br> <button onclick="myFunction(); changeImage();" value="Change">CLICK</button> </body> </html> ```Si desea diferentes estilos para la imagen y el título cuando el modo oscuro está activado, puede hacerlo así:
.dark-mode .img { } .dark-mode .title { }JSFiddle: https://jsfiddle.net/oLtvjwhe/1/