Организация токенов стилей для темной темы

Почему темная тема требует системного подхода, а не быстрой инверсии

При разработке темного режима возникает соблазн просто поменять местами черный и белый цвета. Однако прямая инверсия часто приводит к визуальному шуму: глубокий черный фон создает слишком резкий контраст с белым текстом, из-за чего глаза быстрее устают при чтении.

Кроме того, в темном интерфейсе ломается привычное восприятие объема. В светлой теме слои разделяются мягкими тенями, но на темном фоне тени практически неразличимы. Чтобы сохранить иерархию элементов, разработчикам и дизайнерам требуется единый набор правил передачи состояний и слоев.

Трехуровневая структура токенов: от палитры к смыслу

Чтобы не переписывать код компонентов под каждую тему, в дизайн-системах используют разделение стилей на уровни абстракции. Компоненты никогда не должны напрямую запрашивать конкретный оттенок из палитры.

Устойчивая архитектура токенов обычно строится на трех уровнях:

• Базовые токены (примитивы): неизменяемые значения палитры, например gray-900 или blue-500, которые не зависят от контекста.
• Семантические токены: названия, отражающие назначение цвета, такие как bg-surface-primary, text-secondary или border-focus.
• Компонентные токены: узкие переменные для изоляции отдельных элементов, например button-primary-bg или input-border.

Связывание токенов через каскадные переменные

В кодовой базе темная тема реализуется через переопределение значений семантических токенов в CSS custom properties. Разметка компонента ссылается только на семантику, а браузер подставляет нужное значение в зависимости от атрибута темы.

Условный пример: токен --bg-surface для светлой темы указывает на базовый gray-50, а внутри селектора [data-theme="dark"] перенаправляется на gray-800. При такой схеме верстка кнопок, карточек и меню остается неизменной, меняются лишь значения переменных на верхнем уровне документа.

Передача глубины и слоев без привычных теней

В реальной среде объекты, которые находятся ближе к источнику света, выглядят ярче. В темном интерфейсе этот принцип заменяет работу с тенями и позволяет выстроить систему возвышений (elevation).

Для передачи иерархии поверхностей обычно используют постепенное осветление подложек:

• Фоновый уровень (Canvas): самый темный оттенок страницы, задающий общую плоскость интерфейса.
• Базовая поверхность (Surface Level 1): карточки, таблицы и секции контента, которые немного светлее основного фона.
• Приподнятые слои (Surface Level 2 и выше): модальные окна, выпадающие списки и всплывающие подсказки, требующие наиболее светлого тона и тонких полупрозрачных контуров.

Типичные ошибки при внедрении цветовых токенов

Неструктурированная работа с токенами быстро превращает поддержку стилей в рутину, где добавление нового компонента ломает контрастность в одной из тем.

Перед передачей стилей в продакшен стоит обратить внимание на распространенные недочеты:

• Цветовые имена в семантических токенах: использование названий вроде text-black или bg-white, теряющих смысл в темном режиме.
• Жестко заданные значения в стилях: указание прямых HEX-значений для фона, границ или иконок в обход токенов.
• Пренебрежение контрастом: слабая читаемость приглушенного текста на темных подложках из-за несоответствия стандартам доступности.

Самостоятельная настройка или привлечение специалистов

Если проект представляет собой небольшой сайт или компактное веб-приложение, структурировать токены можно своими силами. Достаточно выделить десяток ключевых CSS-переменных и аккуратно связать их со светлым и темным оформлением.

Когда речь идет о крупном продукте с обширной библиотекой компонентов, интернет-магазине или корпоративной системе, проектирование токенов требует инженерного опыта. В этом случае надежнее пригласить фронтенд-разработчика или специалиста по UI-системам, который организует синхронизацию стилей между макетами и кодом.