Долгое время реализация тёмной темы на production требовала custom properties, JS-тогглов и media-запросов
prefers-color-scheme. Но с ноября 2024 года в CSS появилась нативная функция light-dark(), которая избавляет от этой инфраструктурной головной боли.Как это работает
Функция принимает два аргумента: первый — цвет для светлой темы, второй — для тёмной. Она автоматически выбирает нужное значение, ориентируясь на свойство
color-scheme, которое задаётся на документе или контейнере. Достаточно прописать :root { color-scheme: light dark; } и заменить все цветовые значения на light-dark(). Никаких media-запросов, классов переключения или @media (prefers-color-scheme: dark) — браузер сам всё решает.Production-пример и практический совет
На лендингах и в design-системах часто нужно менять фоны, текст и декоративные элементы под тему. Вместо десятка custom properties и дублирования правил под media-запросы используйте
light-dark():.card {
background: light-dark(#fff, #1e1e1e);
color: light-dark(#1a1a1a, #e0e0e0);
border: 1px solid light-dark(#ccc, #444);
}Совет: если нужно принудительно переключить тему для части интерфейса (например, в админке с собственным тогглом), задайте
color-scheme: light или color-scheme: dark на контейнере — light-dark() подстроится под него, а не под системную тему.Типичная ошибка и trade-off
Многие верстальщики пытаются использовать
light-dark() для градиентов или сложных цветовых комбинаций вроде box-shadow: light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1)). Но функция не поддерживает градиенты — там по-прежнему нужны custom properties или JS. Ошибка: применять light-dark() к свойству background-image с градиентом — это сломает вёрстку в Safari и Chrome. Ещё один минус: поддержка у Firefox пока экспериментальная (за флагом), так что для production с аудиторией на этом браузере лучше оставить fallback через media-запрос.Поддержка браузеров
Chrome 133+, Edge 133+, Safari 18.2+ уже нативно поддерживают
light-dark(). Firefox — в 135+ под флагом (но обычно в production можно использовать с progressive enhancement: зарезервировать цвет по умолчанию, а для современных браузеров — перебить через light-dark()).Вывод: Используйте
light-dark() для простых цветовых пар — это уменьшает код, исключает ошибки специфичности и делает тему стабильной без лишней JS-инфраструктуры, но помните про ограничение на градиенты и тестируйте поддержку Firefox.