'Change image in dark mode

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

javascripthtmlcssmobile


Solution 1:[1]

You could use the <picture> element for you image. Inside the element you can use <source> elements. These source elements can use a media query, like in CSS, to determine if it should show based on the 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Emiel Zuurbier

Related Questions