在黑暗模式下更改图像

Question

我有一个白色的波形图像，它具有动画效果，并且当用户在移动设备上打开我的网站并启用暗模式时，该站点将是暗的，但该图像仍然是白色的

所以我的问题是我该如何解决这个问题？例如在启用暗模式或其他功能时更改图像

Answer 1

您可以为图像使用<picture>元素。在元素内部，您可以使用<source>元素。这些源元素可以使用媒体查询（例如CSS中的媒体查询）来确定是否应基于查询显示。

根据您的情况，您可以检查prefers-color-scheme: dark查询以查看是否启用了暗模式。

如果未启用，则使用图像上的默认 src。
如果启用，则srcset元素上的<source>将用作图像上src的新值。

<picture>
  <source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">
  <img src="light-image.jpg" alt="Animated wave shape">
</picture>