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

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

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

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

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

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