How to change the HTML image in Dark mode
Learn, how to change the html image src in dark mode.
Normally, we use the
prefers-color-scheme css media feature to detect if a user system is in light or dark mode.
To change the image in dark mode, we can use the
<picture> tag in html.
<picture> <source srcset="dark.png" media="(prefers-color-scheme: dark)"> <img src="default.png" alt= "moving car"> </picture>
If the user system is in dark mode
dark.png image is used, else
default.png image is used.
Note: The browser will only download, one of those images based on the
prefers-color-scheme. So that there is no bandwidth wastage.