0
164
Vistasel modo oscuro no cambia el fondo gris
Hola, cuando trato de hacer un modo oscuro, uso la clase de modo oscuro, pero con el fondo gris claro en algunas partes del sitio web no funciona, ¿cómo puedo hacer que esos fondos cambien a gris oscuro o negro cuando el modo oscuro está habilitado?
.dark-mode { background-color: black; color: white; } .light-grey { color: #000!important; background-color: #f1f1f1!important; } <script> // On page load set the theme. (function() { let onpageLoad = localStorage.getItem("theme") || ""; let element = document.body; element.classList.add(onpageLoad); document.getElementById("theme").textContent = localStorage.getItem("theme") || "light"; })(); function themeToggle() { let element = document.body; element.classList.toggle("dark-mode"); let theme = localStorage.getItem("theme"); if (theme && theme === "dark-mode") { localStorage.setItem("theme", ""); } else { localStorage.setItem("theme", "dark-mode"); } document.getElementById("theme").textContent = localStorage.getItem("theme"); } </script> Modo normal:
Cómo se ve al agregar el modo oscuro:
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
no estoy seguro acerca de todo el contexto, pero si tuviera que hacer esto en Vanilla CSS, crearía selectores separados para los diferentes colores de fondo para poder cambiar los nombres de clase en los elementos html
div { width: 200px height: 200px } .dark-mode { color: white; } /* This is selector is basically saaying when you see these two class applied together on the same element apply this style: */ .dark-mode.gray-background { background-color: gray } .dark-mode.black-background { background-color: black } .light-grey { color: #000!important; background-color: #f1f1f1!important; } <!-- in the html the backgrounds will be different --> <div className="dark-mode gray-background"></div> <div className="dark-mode black-background"></div>
·
Juan Pablo Isaza
Denunciar
0
Su 'alternar' solo en la etiqueta del cuerpo. Entonces necesitas agregar esto en tu CSS:
.dark-mode .light-grey{ /* what you want */ }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta