Did you know you can change images bases on the user preferred Color-scheme?
This nifty piece of code could already be used in
CSS, but did you know it works directly in
We can detect if the user prefers a dark or light color schema and show a different image to them based on that!
It will look like this:
HTML Structure permalink
<source srcset="dark-mode.png" media="(prefers-color-scheme: dark)" />
<img src="light-image.png" />
That's is it!
By default, it will show the light image, but it will show the dark image if the person prefers the dark scheme.
Feel free to have a play with this on Codepen.
Browser Support permalink
The support for prefers-color-scheme is getting better, but still not a reliable option to choose.