CSS-функция light-dark() облегчает жизнь при поддержке светлой и тёмной темы. Раньше, чтобы задать разные стили для разных тем, приходилось писать медиа-выражения вроде @media (prefers-color-scheme: dark) и дублировать одни и те же куски стилей с поправками на цвет. Это работало, но выглядело избыточно и громоздко, особенно когда надо было поменять всего один цвет. Для системности создавались CSS-переменные — например, --text-color, значение которой менялось внутри медиавыражения. Всё это работало, но напоминало церемонию ради церемонии.
С light-dark() всё стало проще. Это функция, которая на лету подставляет значение в зависимости от активной темы. Если у пользователя включена светлая тема, функция вернёт первое значение. Если тёмная — второе. Пример: color: light-dark(black, white) — в светлой теме будет чёрный текст, в тёмной — белый. Всё. Никаких переменных, никаких @media. Просто одно свойство и два значения — читаемо, логично, компактно.
Как включить light-dark ()
Чтобы light-dark() работала как положено, нужно явно указать, что страница поддерживает обе темы. Для этого в корневом селекторе :root прописывается свойство color-scheme: light dark. Оно сообщает браузеру, что элемент (и всё внутри него) должен реагировать на системную цветовую схему пользователя. Без этой строки light-dark() всегда будет возвращать только первое значение, независимо от включённой темы. То есть, если написать color: light-dark(black, white) без объявления color-scheme, цвет всегда будет чёрным — даже если у пользователя активна тёмная тема. Это маленькая, но критически важная деталь, которую легко упустить, особенно при тестировании.
Как использовать
Давайте посмотрим на простой пример.
Функция работает не только для цвета текста. Её можно применять к фону, границам, теням и любым другим свойствам, которые могут менять вид в зависимости от темы. Например, background: light-dark(#fff, #121212) сделает фон белым в светлой теме и почти чёрным в тёмной. Или можно задать цвет рамки: border: 1px solid light-dark(#ccc, #444). И даже в сочетании с calc() она себя чувствует нормально, например:
box-shadow: 0 2px 4px light-dark(rgba(0,0,0,0.1), rgba(0,0,0,0.5)).
Вот пример того, как это выглядит в реальной жизни. Чтобы проверить у себя, измените тему браузера в настройках (или дождитесь, пока начнется ночь, если у вас автоматическая тема).
Что важно — light-dark() работает только с системной темой, которую пользователь выбирает в настройках операционной системы или браузера. Если на сайте есть своя кнопка переключения темы, функция никак на неё не отреагирует.
Поддержка в браузерах
light-dark() работает во всех современных браузерах: в Chrome и Edge начиная с версии 123, в Firefox с версии 120, в Safari начиная с 17.5 и даже в мобильных браузерах вроде Chrome for Android и Safari на iOS. Это означает, что если ваша аудитория не использует сильно устаревшие версии, вы можете спокойно применять light-dark() в боевом проекте. По данным на апрель 2025 года, глобальное покрытие функции превышает 87%.
Тем не менее, стоит учитывать исключения. Internet Explorer, Opera Mini, старые версии мобильных браузеров и кастомные WebView движки на Android функцию не поддерживают. Поэтому, если вы ориентируетесь на аудиторию со старыми браузерами, лучше предусмотреть запасной вариант — например, использовать CSS-переменные в связке с @media, как делали раньше. Но в большинстве случаев light-dark() уже можно внедрять как основной способ задания адаптивных значений по теме.
Однако есть интересный гибридный подход — можно использовать light-dark() внутри переменных. Например: --text-color: light-dark(black, white). Тогда и повторное использование есть, и читаемость сохраняется.
Функция полезна там, где хочется сразу понять, что за цвет подставится в каждой теме. Она не заменяет систему тем как таковую, но делает многие повседневные вещи проще. Это не прорыв, а хорошая эволюция.