Estoy tratando de implementar el modo oscuro en mi sitio. Entonces, cuando se hace clic en un botón para pasar al modo oscuro, debe aplicar la clase "oscura" al div principal y aplicar la clase "invisible" al párrafo, para ocultarlo en el modo oscuro. Cuando se vuelve a hacer clic en el botón, debería eliminar la clase oscura y eliminar la clase invisible. Pero sucede lo contrario, el párrafo se oculta en el modo claro y se muestra en el modo oscuro. Enviar ayuda.
document.querySelector(".btn").addEventListener("click", function() { document.querySelector(".main").classList.toggle("dark"); document.querySelector(".main p").classList.toggle("invisible"); }) html, body { font-family: 'Fredoka', sans-serif; height: 100%; margin: 0; } h1 { font-size: 70px; margin: 0 0 10px; } p { font-size: 25px; margin: 30px 0px 20px; } .main { text-align: center; min-height: 100%; display: flex; justify-content: center; align-items: center; flex-flow: column; } .dark { background-color: #1a1919; color: white; } .invisible { display: none; } <div class="main"> <div> <h1 class="heading">Hey there!</h1> </div> <div> <p> Welcome to my cool little website that has a dark mode functionality. <br> If you're an uncultured **** who prefers light mode, then please leave. <br> But if you're not, then click the button below. </p> </div> <div> <button class="btn">Dark Mode</button> </div> </div>Prueba esto:
document.querySelector(".btn").addEventListener("click",function(){ document.querySelector(".main").classList.toggle("dark"); if(document.querySelector(".main").classList.contains("dark")) document.querySelector(".main p").classList.remove("invisible"); else document.querySelector(".main p").classList.add("invisible"); })