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 ran 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.

Lessons in this unit:

0:	Introduction
1:	Preserving white space and line breaks in a string in HTML
2:	HTML, avoid displaying a broken image if the image is not found
3:	The HTML figure tag
4:	▶︎ Change image source in dark mode
5:	Accept only images in file input
6:	HTML comments
7:	Some useful tricks available in HTML5
8:	How to make an hr invisible
9:	Conditionally set an HTML attribute
10:	An HTML element id is a global variable