在黑暗模式下更改图像

Question

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

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

Answer 1

您可以为图像使用 <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>

Change image in dark mode