---
description:
  Дизайн-токены — это набор базовых переменных, задающих отступы, цвета, типографику и анимации.
  VKUI использует токены вместо конкретных значений, чтобы компоненты было легко подстраивать
  под конкретные платформы и цветовые режимы.
---

<Overview type="doc">
# Дизайн-токены

[Дизайн-токены](https://foundation.mozilla.org/en/docs/design/websites/design-tokens/) — это набор базовых переменных,
задающих отступы, цвета, типографику и анимации. VKUI использует токены вместо конкретных значений,
чтобы компоненты было легко подстраивать под конкретные платформы и цветовые режимы.

</Overview>

VKUI использует пакет [@vkontakte/vkui-tokens](https://github.com/VKCOM/vkui-tokens) с готовыми наборами дизайн-токенов.

Токены поставляются в форматах `css`, `scss`, `less`, `pcss`, `styl`, `js`, `json`. VKUI использует формат `css`.

Каждый набор токенов объявлен в CSS-классе вида `vkui--<themeName>--<colorScheme>`. По умолчанию поддерживаются темы `vkBase`/`vkBaseDark`, `vkIOS`/`vkIOSDark` и `vkCom`/`vkComDark`.

Например, для тёмного режима темы `vkBase` класс выглядит так — `vkui--vkBase--dark` ([CSS-файл](https://esm.cdn-vk.ru/@vkontakte/vkui-tokens@4/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css)).

Все токены начинаются с префикса `--vkui--`.

В приложении вы можете ссылаться на любые токены подключённой темы из CSS-файлов или через свойство `style`.

Например:

```jsx
<div style={{ color: `var(--vkui--color_accent_lime)` }}>
  Я использую цветовой токен цвета лайма.
</div>
```

## Переопределение токенов

Иногда нужно переопределить значения отдельных токенов. Например, так:

```css filename="app-styles.css"
.forceColorRed {
  --vkui--color_text_primary: red;
}
```

Теперь все потомки компонента с классом `forceColorRed` получат `red` для токена `--vkui--color_text_primary`.

Такой способ не рекомендуется: он подвержен проблемам специфичности — придётся следить, чтобы чанк с переопределениями подключался после CSS-стилей VKUI.

Лучше создать собственную тему, возможно на основе существующей. Подробнее — на [странице токенов](https://vkcom.github.io/vkui-tokens).