Как изменить 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
• HTML-тег iframe
• HTML-формы
• HTML-тег `video`
• HTML-тег `audio`
• HTML-теги для текста
• Таблицы HTML
• HTML-тег img
• HTML-тег `a`
• HTML-тег `picture`
• HTML-тег `figure`
• Теги контейнера HTML
• Доступность в Интернете
• Как создать комментарий в HTML
• Как изменить URL-адрес HTML-изображения в темном режиме
• Адаптивные изображения с использованием srcset
• Изменение фавикона в темном режиме