Раньше для поддержки светлой и тёмной темы приходилось дублировать стили через @media (prefers-color-scheme) и заводить отдельную переменную под каждый цвет. Функция light-dark() принимает два значения: первое для светлой темы, второе для тёмной. Браузер подставляет нужное сам. В статье разбираем, как подключить функцию (без color-scheme: light dark она не заработает), где применять и какие браузеры пока остаются за бортом. #css #baseline 🎁 Читать статью
Одно свойство, два цвета, ноль медиавыражений — light-dark() решает переключение темы в одну строку.
Раньше для поддержки светлой и тёмной темы приходилось дублировать стили через @media (prefers-color-scheme) и заводить отдельную переменную под каждый цвет. Функция light-dark() принимает два значения: первое для светлой темы, второе для тёмной. Браузер подставляет нужное сам.
В статье разбираем, как подключить функцию (без color-scheme: light dark она не заработает), где применять и какие браузеры пока остаются за бортом. #css #baseline
