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.
Download my free HTML Handbook
More html tutorials:
- An introduction to HTML
- The HTML `iframe` tag
- HTML forms
- The HTML `video` tag
- The HTML `audio` tag
- HTML tags for text
- HTML tables
- The HTML `img` tag
- The HTML `a` tag
- The HTML `picture` tag
- The HTML `figure` tag
- HTML container tags
- Accessibility on the Web
- How to create a comment in HTML
- How to change an HTML image URL in dark mode
- Responsive images using `srcset`
- Changing the favicon in dark mode