Блог

У меня есть белое изображение в форме волны и оно анимировано, и когда пользователь открывает мой сайт на мобильных устройствах и включает темный режим, сайт будет темным, но это изображение все еще белое

Итак, мой вопрос в том, как я могу решить эту проблему? например, изменить изображение, если включен темный режим или что-то еще

Используйте <picture> элемент с вашим изображением. Внутри элемента добавьте один или несколько <source> элементов. Эти исходные элементы используют медиа-запрос, как в CSS, чтобы определить srcset , следует ли использовать ресурс в на основе медиа-запроса.

В вашем случае вы можете проверить prefers-color-scheme: dark запрос, чтобы узнать, включен ли темный режим.

Если он не включен, то используется значение по умолчанию src для изображения.
Если он включен, то элемент srcset on the <source> будет использоваться в качестве нового значения для элемента 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>