Изменить CSS-свойства различных элементов при переходе в темный режим (dark mode) несложно - достаточно использовать медиа функцию prefers-color-scheme. Но, что делать, если появляется другая проблема: как при смене темы браузера на dark mode изменить изображение, объявленное непосредственно в HTML-документе, когда нет возможности воспользоваться всеми преимуществами правил CSS?

Для решения такой задачи можно обернуть элемент <img> в блок <picture>:

<picture>
  <source 
    srcset="dark.png" 
    media="(prefers-color-scheme: dark)">
  <img src="light.png">
</picture>

Код, приведенный выше, установит для <img> источник изображения dark.png, если для браузера доступен и включен темный режим.

Этот прием хорошо поддерживается современными браузерами. В случае, если браузер не поддерживает dark mode или этот режим не включен, будет установлена картинка light.png.

Следует отметить, что при использовании такого трюка не происходит одновременной загрузки обоих изображений, в зависимости от выбранного для браузера режима будет загружаться только актуальная картинка: dark.png - при включенном dark mode, light.png - в случае, если включен обычный режим или смена режимов не поддерживается браузером.

Спасибо за внимание.