更改深色模式下的图像

Question

我有一个波浪形状的白色图像及其动画，当用户在移动设备上打开我的网站并启用深色模式时，该网站将是黑色的，但该图像仍然是白色的

所以我的问题是我该如何解决这个问题？例如，如果启用了暗模式或其他模式，则更改图像

Answer 1

<picture>将元素与您的图像一起使用。在元素内部添加一个或多个<source>元素。srcset这些源元素使用媒体查询（就像在 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>