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?
We can use the
picture tag to wrap the
<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
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
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.
Download my free HTML Handbook!