Например, bg.accent ссылается на blue 500 в светлом режиме и на blue 300 в тёмном, а компоненты в обоих режимах используют одно и то же имя.
Режимы в Figma
В Figma режимы принадлежат коллекции переменных. У каждой переменной своё значение для каждого режима, а для страницы, секции или фрейма можно выбрать, какой режим показывать. Число режимов в коллекции зависит от тарифа: один режим на Starter, до 10 на Professional, до 20 на Organization и без ограничений на Enterprise (Figma plans and features). У выгрузки этих значений из Figma свои сложности: как отдать переменные Figma разработчикам без тарифа Enterprise.
Режимы в коде
Format Module от DTCG режимы не определяет. Их описывает сопутствующий Resolver Module 2025.10: как работать с токенами в нескольких контекстах, например в светлой и тёмной темах. Style Dictionary 5.5.5, к примеру, его пока не читает. Поэтому во многих проектах держат по файлу токенов на режим, и так же их записывает Export mode в Figma. В CSS каждый режим обычно становится блоком пользовательских свойств под своим селектором:
:root {
--bg-accent: var(--color-blue-500);
}
[data-theme="dark"] {
--bg-accent: var(--color-blue-300);
}В такой схеме между режимами меняются только смысловые токены: палитра остаётся прежней, а компонентам не нужно знать, какой режим сейчас включён.
Где режимы ломаются
Режимы ломаются, когда компонент использует примитивный токен напрямую: у color.blue.500 нет тёмного значения, и в тёмном режиме компонент остаётся светлым. Режим переключается полностью, только если везде стоят смысловые токены.
Смотрите также
- Дизайн-токен
- Style Dictionary на практике: токены в CSS, SCSS и TypeScript: как собрать светлый и тёмный CSS из файлов токенов.