---
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).