Changing Image on Dark mode

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!

can you add a `class` to the image, and then when it's dark (or vise-versa) make it `display: none`? — Matthew, Mar 02 '22 at 20:23
@Matthew thanks for your reply. If I add the class and then when it's dark (or vise-versa) change it, I'll have to add the class to all the images and I have over 10 images on the home page and at least 4 in the rest 4 pages. I'm thinking if there's a way to change all once the mode changes. Thanks again. — Iroro, Mar 02 '22 at 20:36
You can make a blank element with a background of a url (`background: url(something)`), then change that if the element is in the class dark-theme (`.dark-theme img.class { ... }`) — kelsny, Mar 02 '22 at 20:45
@youdateme so how can I implement that on all my images? I don't quite get what you mean by saying add a blank background image. — Iroro, Mar 02 '22 at 21:27

score 1 · Accepted Answer · answered Mar 02 '22 at 22:58

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>

This kind of solution is clearly for `background-image` but `background-image` has different purpose in general than the HTML `img` tag and they shouldn't be replaced one to another. There is needed another solution for the `img` tag. — Bartek, Aug 11 '22 at 09:47
@Bartek https://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css — kelsny, Aug 11 '22 at 16:32

Changing Image on Dark mode

1 Answers1