Как изменить URL-адрес HTML-изображения в темном режиме

Используя CSS, довольно легко применить изменения, если система находится в темном режиме, используяprefers-color-schemeмедиа-функция.

Проверьте мою запись в блоге натемный режимесли вы хотите узнать об этом больше.

Сегодня я столкнулся с проблемой - как изменить изображение, определенное в HTML, а не в правиле CSS?

Оказывается, есть простой HTML-способ сделать это без использования CSS или JavaScript.

Мы можем использоватьpictureтег, чтобы обернутьimgтег:

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

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

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

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

Скачать мою бесплатнуюСправочник по HTML


Дополнительные руководства по HTML: