¿Espero que estes bien? Estoy trabajando en un proyecto que tiene diferentes imágenes según el modo seleccionado (modo claro u oscuro).
No estoy usando la consulta CSS a continuación
@media (prefers-color-scheme: dark) {}Configuré una variable COLOR global en mi CSS así
:root { --light-color: #f2f8ff; --dark-color: #13141c; --third-color: #ffffff; /* for white background like the boxes, FAQ and the footer section */ --fourth-color: #525b6d; /* for paragraphs..*/ --fifth-color: #000000; /* for paragraphs with black background*/ } .dark-theme { --light-color: #13141c; --dark-color: #f2f8ff; --third-color: #09090b; --fourth-color: #f2f8ff; --fifth-color: #f2f8ff; }Luego usé javascript para aplicar el evento de clic. si se hace clic en el botón de alternar, el color de la raíz cambiará a .dark-theme.
¿alguien puede ayudarme con una forma de cambiar las imágenes en modo oscuro y tener los mismos estilos y posición que las principales?
¡Gracias por adelantado!
Agregando a mi comentario, aquí tenemos una sección que tendrá la clase de tema oscuro. Dentro hay un div, que está vacío. Será nuestro "lienzo" donde podremos utilizar imágenes como fondo.
También agregué un botón y un pequeño JS para alternar la clase para que pueda ver que funciona.
// PLEASE NOTE: // I am abusing and using some old features // to quickly write an example. // Please do not use this kind of code in your own projects! button.onclick = () => { // get the section and toggle theme document.querySelector("section").classList.toggle("dark-theme"); }; div { width: 150px; height: 150px; background: url(https://via.placeholder.com/150?text=Light); } .dark-theme div { background: url(https://via.placeholder.com/150?text=Dark); } <!-- Toggle theme --> <button id="button">toggle</button> <!-- Dark themable section --> <section> <!-- Image will be the background of this div --> <div></div> </section>