⁣CSS light-dark() и color-mix(): темизация без CSS-переменных под каждый режим

Многие верстальщики по привычке заводят десятки переменных в :root для светлой темы и дублируют их в [data-theme="dark"]. Это не только раздувает код, но и создаёт риск рассинхронизации значений при рефакторинге. Современные CSS-функции light-dark() и color-mix() позволяют избавиться от этой практики, перенося логику на уровень браузера.

light-dark() — одна запись вместо двух наборов переменных

Вместо того чтобы писать:

:root { --bg: white; --text: black; }
[data-theme="dark"] { --bg: black; --text: white; }

Достаточно задать:

:root { color-scheme: light dark; }
body {
  background: light-dark(white, black);
  color: light-dark(black, white);
}

Функция сама определяет активную тему через color-scheme. Первый аргумент — цвет для светлой, второй — для тёмной. Никаких media-запросов, никакого дубляжа правил. Это работает в production: лендинги, админки, дизайн-системы — везде, где тема переключается системно или вручную.

Ошибка: если не задать color-scheme на элементе или его родителе, light-dark() просто не сработает. Браузер не поймёт, какой режим считать светлым. Для ручного переключения через атрибут пиши:

[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

Меняешь data-theme через JS — функция подхватывает контекст.

color-mix() — адаптивные оттенки без препроцессоров

Если нужно смешивать цвета, color-mix() даёт точную колориметрию на уровне CSS. Например, сделать полупрозрачный акцент, который адаптируется под фон:

:root { --accent: #007bff; }
.button {
  background: color-mix(in srgb, var(--accent) 70%, light-dark(white, black));
}

Результат — оттенок акцента, осветлённый на белом фоне и затемнённый на чёрном. Без лишних переменных и JS-расчётов.

Подводный камень: color-mix() требует указать цветовое пространство (например, in srgb). Без этого оно не сработает. Также смешивание в sRGB может давать менее насыщенные цвета по сравнению с OKLCH — это trade-off между предсказуемостью и точностью.

Вывод: light-dark() и color-mix() — это не синтаксический сахар, а инженерный инструмент, который сокращает объём CSS, повышает согласованность тем и устраняет ручное дублирование.