I have a white image in a wave shape and its animated, and when the user open my site on mobile devices and enable dark mode the site will be dark but this image is still white
So my question is how can i solve this problem? like change the image if dark mode is enable or something else
I have a white image in a wave shape and its animated, and when the user open my site on mobile devices and enable dark mode the site will be dark but this image is still white
So my question is how can i solve this problem? like change the image if dark mode is enable or something else
Share Improve this question asked Sep 20, 2020 at 8:35 Sinan AbedSinan Abed 651 gold badge2 silver badges8 bronze badges1 Answer
Reset to default 9Use the <picture> element with your image. Inside the element add one or more <source> elements. These source element use a media query, like in CSS, to determine if the asset in the srcset should be used based on the media query.
In your case you could check the prefers-color-scheme: dark query to see if dark mode is enabled.
If it is not enabled then the default src on the image is used.
If it is enabled then the srcset on the <source> element will be used as the new value for the src on the image.
<picture>
<source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">
<img src="light-image.jpg" alt="Animated wave shape">
</picture>