最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Change image in dark mode - Stack Overflow

programmeradmin0浏览0评论

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 badges
Add a ment  | 

1 Answer 1

Reset to default 9

Use 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>
发布评论

评论列表(0)

  1. 暂无评论