Hope you're well? I'm working on a project that has different images depending on the selected mode (light or dark mode).
I'm not using the CSS query below
@media (prefers-color-scheme: dark) {}
I set up a global COLOR variable on my CSS like so
: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;
}
Then I used javascript to apply the click event. if the toggle button is clicked, then the root color will change to the .dark-theme.
can anyone help me with a way to change the images on dark mode and have the same styles and position as the main ones?
Thanks in advance!
Adding onto my comment, here we have a section that will have the dark-theme class. Inside is a div, which is empty. It will be our "canvas" where we can use images as the background.
I've also added a button and a little JS to toggle the class so you can see that it works.
// 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>