Dark mode images without javascript
The <picture>
element supports media query matchers and if you want to specify a different image for dark mode, you can use a different <source>
. So, if there are no suitable matches or if the browser doesn’t support the <picture>
element, then the default src
attribute is selected.
<picture>
<source srcset="dark.png" media="(prefers-color-scheme: dark)">
<img src="light.png">
</picture>
If dark mode is enabled, the dark.png
image will be used as the source for the img
tag.