Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.
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 well supported, and older browsers that do not implement it or do not support dark mode will fall back to displaying the light.png image.
It’s important to note that the browser does not download two images. In this example, if it’s dark mode it will download only dark.png, and if it’s light mode it will download only light.png, so there’s no waste of bandwidth.