How to change an HTML image URL in dark mode
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 all my books for free
- javascript handbook
- typescript handbook
- css handbook
- node.js handbook
- astro handbook
- html handbook
- next.js pages router handbook
- alpine.js handbook
- htmx handbook
- react handbook
- sql handbook
- git cheat sheet
- laravel handbook
- express handbook
- swift handbook
- go handbook
- php handbook
- python handbook
- cli handbook
- c handbook
subscribe to my newsletter to get them
Terms: by subscribing to the newsletter you agree the following terms and conditions and privacy policy. The aim of the newsletter is to keep you up to date about new tutorials, new book releases or courses organized by Flavio. If you wish to unsubscribe from the newsletter, you can click the unsubscribe link that's present at the bottom of each email, anytime. I will not communicate/spread/publish or otherwise give away your address. Your email address is the only personal information collected, and it's only collected for the primary purpose of keeping you informed through the newsletter. It's stored in a secure server based in the EU. You can contact Flavio by emailing flavio@flaviocopes.com. These terms and conditions are governed by the laws in force in Italy and you unconditionally submit to the jurisdiction of the courts of Italy.