---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/css.md
  - href: https://yandex.ru/support/kit/ru/site-editor/custom-sections/shablons/css.md
    type: text/markdown
    title: Markdown version
  - href: https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/kit/ru/llms.txt?revision=r22105010



# CSS-переменные

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

С помощью переменных можно управлять внешним видом новых секций в настройках **Тема** в редакторе сайта.

{% note info %}

Если вы впервые сталкиваетесь с CSS-переменными, рекомендуем ознакомиться с документацией [MDN](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties).

{% endnote %}

Использование CSS-переменных упрощает разработку секций — в инструменте разработки браузера видно, какой токен темы используется в качестве значения.

## Фоновые цвета

#|
||

**Переменная**

|

**Описание**

|

**Использование**

|

**Пример**

||
||

**--ys-background-primary**

|

Основной цвет фона приложения.

|

Основной фон страниц, модальных окон, карточек.

|

{% cut "CSS" %}

```CSS
body {
  background-color: var(--ys-background-primary);
}
```

{% endcut %}

||
||

**--ys-background-neutral**

|

Нейтральный вторичный фон.

|

Второстепенные элементы, разделители секций, альтернативные фоны.

|

{% cut "CSS" %}

```CSS
.card-secondary {
  background-color: var(--ys-background-neutral);
}
```

{% endcut %}

||
||

**--ys-background-secondary**

|

Акцентный вторичный фон, содержит оттенок фирменного цвета.

|

Выделенные блоки, highlighted-секции, активные состояния.

|

{% cut "CSS" %}

```CSS
.featured-block {
  background-color: var(--ys-background-secondary);
}
```

{% endcut %}

||
|#


## Цвета текста

#|
||

**Переменная**

|

**Описание**

|

**Использование**

|

**Пример**

||
||

**--ys-color-token-text-primary**

|

Основной цвет текста. Максимальная читаемость на основном фоне.

|

Заголовки, основной контент, важная информация.

|

{% cut "CSS" %}

```CSS
.heading, .paragraph {
  color: var(--ys-color-token-text-primary);
}
```

{% endcut %}

||
||

**--ys-color-token-text-secondary**

|

Вторичный цвет текста. Пониженная контрастность для визуальной иерархии.

|

Подписи, метаинформация, вспомогательный текст.

|

{% cut "CSS" %}

```CSS
.caption, .meta-info {
  color: var(--ys-color-token-text-secondary);
}
```

{% endcut %}

||
||

**--ys-color-token-placeholder**

|

Цвет текста placeholder.

|

Placeholder в полях ввода, пустые состояния.

|

{% cut "CSS" %}

```CSS
input::placeholder {
  color: var(--ys-color-token-placeholder);
}
```

{% endcut %}

||
|#

## Границы

#|
||

**Переменная**

|

**Описание**

|

**Использование**

|

**Пример**

||
||

**--ys-color-token-border-primary**

|

Основной цвет границ. Автоматически подстраивается под цвет фона.

|

Основные разделители, рамки элементов форм, контуры карточек.

|

{% cut "CSS" %}

```CSS
.input, .card {
  border: 1px solid var(--ys-color-token-border-primary);
}
```

{% endcut %}

||
||

**--ys-color-token-border-secondary**

|

Вторичный цвет границ. Более заметный чем `--ys-color-token-border-primary`.

|

Менее заметные разделители, hover-состояния, декоративные линии.

|

{% cut "CSS" %}

```CSS
.divider, .table-row:hover {
  border-color: var(--ys-color-token-border-secondary);
}
```

{% endcut %}

||
|#

<!-- source: ru/_includes/support.md -->


## Обратиться в службу поддержки


[Написать в чат](https://yandex.ru/chat/#/user/6c041b05-07a4-99cc-79be-8670b7aff93d){.button}

[Написать письмо](https://yandex.ru/support/kit/ru/feedback.md){.button}

[Яндекс KITᵝ в Telegram](https://t.me/kityandex_support_bot){.button}

[Яндекс KITᵝ в МАКС](https://max.ru/yandex_kit_bot){.button}
<!-- endsource: ru/_includes/support.md -->