Тёмная, светлая тема
В современных устройствах пользователи могут указывать, какую тему сайтов или приложений они предпочитают использовать (светлую или тёмную).
Чтобы дать устройству понять, какую тему использует сайт, можно использовать CSS-свойство color-scheme
.
:root {
color-scheme: light dark; /* сайт поддерживает тёмную и светлую тему */
color-scheme: only light; /* сайт поддерживает только светлую тему */
}
Выполнять стиль, в зависимости от выбранной темы, можно через медиа-запрос @media (prefers-color-scheme)
.
/* стили, если пользователь переключил сайт в тёмный режим */
@media (prefers-color-scheme: dark) {
.p {
color: #fff;
}
}
Также есть CSS-свойство light-dark()
, через которое можно сразу указать стиль для тёмной и светлой темы.
.p {
color: light-dark(#333, #fff);
}
Выводить картинку на светлой или тёмной теме
Выводить картинку в зависимости от того, какая выбрана тема (светлая или тёмная), можно через тег <picture>
.
<picture>
<source srcset="image-light.jpg" media="(prefers-color-scheme: light)">
<source srcset="image-dark.jpg" media="(prefers-color-scheme: dark)">
<img src="image-light.jpg" alt="">
</picture>
Отладка светлой и тёмной темы в Dev Tools
Симулировать переключение светлой или тёмной темы на устройстве можно через Dev Tools через кнопку «Включить или отключить распространенные эмуляции отрисовки».
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта