Добавить в корзинуПозвонить
Найти в Дзене
HTML Academy

Тёмная тема обычно удваивает CSS: пишете цвета для светлой, потом те же — для тёмной в @media

Функция light-dark() схлопывает это в одну строку: оба значения в одном объявлении, а браузер выбирает нужное по системной теме. Уже работает во всех актуальных браузерах, а для старых достаточно обычного запасного цвета. В статье — как подключить (есть обязательный color-scheme, иначе не сработает) и чем функция выручает дизайн-системы. #css #baseline 💡 Читать статью

Тёмная тема обычно удваивает CSS: пишете цвета для светлой, потом те же — для тёмной в @media. Функция light-dark() схлопывает это в одну строку: оба значения в одном объявлении, а браузер выбирает нужное по системной теме.

Уже работает во всех актуальных браузерах, а для старых достаточно обычного запасного цвета. В статье — как подключить (есть обязательный color-scheme, иначе не сработает) и чем функция выручает дизайн-системы. #css #baseline

💡 Читать статью