【发布时间】：2020-09-20 16:50:13
【问题描述】：
我有一个波浪形的白色图像及其动画，当用户在移动设备上打开我的网站并启用暗模式时，网站会变暗，但该图像仍然是白色
所以我的问题是我该如何解决这个问题？如果启用暗模式或其他方式，例如更改图像
【问题讨论】：
标签： javascript html css mobile
【发布时间】：2020-09-20 16:50:13
【问题描述】：
您可以为您的图像使用<picture> 元素。在元素内部，您可以使用<source> 元素。这些源元素可以使用媒体查询（如在 CSS 中）来确定是否应根据查询显示。
在您的情况下，您可以检查 prefers-color-scheme: dark 查询以查看是否启用了暗模式。
如果未启用，则使用图像上的默认 src。
如果启用，则<source> 元素上的srcset 将用作图像上src 的新值。
<picture>
<source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">
<img src="light-image.jpg" alt="Animated wave shape">
</picture>
【讨论】：
-
我认为
prefers-color-scheme: dark只能在 safari 浏览器上工作，对吧？ -
不，支持还不错。 caniuse prefers-color-scheme.