Skip to content

How to change an HTML image URL in dark mode

New Course Coming Soon:

Get Really Good at Git

Using CSS it’s pretty easy to apply changes if the system is in dark mode, using the prefers-color-scheme media feature.

Check my blog post on dark mode if you want to learn more about it.

Today I run into a problem - how to change an image defined in the HTML, rather than a CSS rule?

Turns out there’s a plain HTML way to do that, without any CSS or JavaScript involved.

We can use the picture tag to wrap the img tag:

<picture>
  <source 
    srcset="dark.png" 
    media="(prefers-color-scheme: dark)">
  <img src="light.png">
</picture>

If dark mode is supported and enabled, the dark.png image will be used as the source for the img tag.

The tag is very well supported, and old browsers that do not implement it, or do not implement dark mode, will fall back to displaying the light.png image.

It’s important to note that the browser does not download 2 images, in any case: if it’s dark mode, in this example it will just download the dark.png image, and if it’s light mode, it will download only light.png, so there’s no waste of bandwidth.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my HTML Handbook
→ Read my HTML Tutorial on The Valley of Code

Here is how can I help you: