How to change the HTML image in Dark mode
In this post we will give you information about How to change the HTML image in Dark mode. Hear we will give you detail about How to change the HTML image in Dark modeAnd how to use it also give you demo for it if it is necessary.
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.
Example:
<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.
Hope this code and post will helped you for implement How to change the HTML image in Dark mode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs