light-dark(): включаем тёмную тему в одну строку CSS

Поддержка тёмной темы обычно требует дублирования: вы пишете цвета для светлой темы, а потом ещё раз — внутри @media (prefers-color-scheme: dark). Это удваивает CSS, в котором потом ещё и легко запутаться. А вот функция light-dark() убирает дублирование: вы задаёте оба значения прямо в одном объявлении, а браузер сам выбирает нужное.

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

:root {
  color-scheme: light dark;
}

body {
  background: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#1a1a1a, #f0f0f0);
}

.card {
  background: light-dark(#f5f5f5, #2a2a2a);
  border: 1px solid light-dark(#e0e0e0, #404040);
}

Системная тема — не единственный вариант. Если на конкретном элементе задать color-scheme: dark, то все вложенные light-dark() начнут отдавать тёмные значения, независимо от настроек ОС. Это позволяет сделать переключатель темы: меняете color-scheme на корне через JS — и весь интерфейс перестраивается.

Функция особенно хороша для дизайн-систем и компонентных библиотек, где каждый цвет описан один раз. Вместо двух наборов токенов вы держите один с парами значений. Сопровождать такой код проще: добавляя новый цвет, вы сразу думаете об обеих темах.

Функция light-dark() поддерживается в Chrome 123+, Firefox 120+ и Safari 17.5+. На середину 2026 года это покрывает подавляющее большинство пользователей. Для старых браузеров стоит оставить запасной цвет в обычном объявлении перед строкой с light-dark() — браузер просто проигнорирует непонятную функцию.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.