Популярный пост
Автоматическая смена темы, функция light-dark()
Раньше для смены темы на сайте приходилось писать медиа-выражения @media (prefers-color-scheme: dark) и переопределять стили. Менее громоздкий вариант получался при использовании кастомных свойств. Но и их приходилось
использовать внутри блока медиа-выражения.
Но появился более удобный способ: функция light-dark(), позволяющая одновременно задать оба варианта цвета. Функция работает во всех современных браузерах, проверяйте поддержку на
caniuse.
Важно помнить о том, что функция light-dark() работает только с системной темой, которую пользователь выбирает в настройках операционной системы или браузера. Если на сайте есть своя кнопка переключения темы, функция никак на неё не отреагирует. Раньше публиковала статью о создании переключателя тем, который позволяет выбирать разные темы по желанию пользователя: Переключение тем на сайте
Функцию можно применять к любым свойствам, использующим цвет: фон, границы, тени, градиенты и так далее, а не только к цвету шрифта.
Включение light-dark()
Сама по себе функция light-dark() не заработает. Нужно заранее сообщить браузеру, что страница поддерживает обе цветовые схемы. Иначе браузер будет брать только первое значение.
:root {
color-scheme: light dark;
}
Применение
:root {
color-scheme: light dark;
}
.block {
color: light-dark(black, white);
background: light-dark(white, black);
}
В результате, при установленной светлой теме цвет шрифта будет чёрным на белом фоне, а в тёмной, соответственно, наоборот.
Я очень люблю кастомные свойства и они снова очень хорошо помогают для повышения читаемости и нет необходимости помнить какую пару цветов нужно задать.
--text-color: light-dark(black, white);
--bg-color: light-dark(white, black);