在深色模式下更改图像

Question

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!

Answer 1

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>