# Замена цвета и дополнительные переменные

### Замена стандартных цветов темы

Заменить цвет набора можно в переменных, которые мы добавили во вкладку CSS настроек темы:

<figure><img src="/files/29dJp7FZFLyHB5djf12l" alt=""><figcaption></figcaption></figure>

Фоновые цвета менять не рекомендую. Если только вы точно знаете, что делаете и что хотите получить в результате.

Цвета, которые вы можете самостоятельно заменить, находятся в первом блоке переменных — **Основные акцентные цвета**.

`--primary-color` — основной цвет школы. В него красятся тренинги при наведении, выделяются активные пункты меню, кнопки, ссылки и т. д.

`--secondary-color` — дополнительный или вторичный цвет. В него красятся, например, звёзды в блоке оценки качества урока.

`--success-color` — цвет «успеха». Используется в кнопках, уведомлениях платформы.

`--alert-color` — акцентный цвет для предупреждений и иконок уведомлений. Как правило красный или близкий к красному.

Если у вас есть фирменный стиль, вы можете заменить стандартные цвета на свои из гайдбука. Просто скопируйте HEX-коды и вставьте в нужные переменные.

Если фирменного стиля нет, но очень хочется использовать другие цвета, воспользуйтесь онлайн-инструментами подбора палитр:

* [Adobe Color](https://color.adobe.com/ru/create/color-wheel)
* [Colors.co](https://coolors.co/)
* [ColorKit](https://colorkit.co/color-palette-generator/)

{% hint style="danger" %}
Не используйте слишком светлые оттенки. Иначе текст в блоках со светлым фоном может с ним слиться и стать неразличимым. Старайтесь использовать насыщенные и не слишком яркие цвета.
{% endhint %}

### Дополнительные переменные

`--link-color` — переменная отвечает за цвет ссылок в текстовых блоках и в таблицах. По умолчанию задан тёмно-серый, почти чёрный цвет. Можете задать здесь основной акцентный цвет школы, но помните, что на страницах с большим количеством ссылок, может получиться довольно пёстро.

`--r1` и `--r2` — это радиусы скругления. Уменьшая их значения, углы в некоторых блоках станут прямее. Если задать «0», скругления уберутся полностью. Не задавайте слишком большие значения. Не рекомендую делать их больше 30px.

Переменная `--base-btn-radius` отвечает за скругление углов кнопок. Если хотите, чтобы края кнопок стали максимально скруглёнными, задайте значение 99px.

`--training-cols` — количество колонок в списке тренингов. По умолчанию 2. Если не используете боковую колонку, можно установить значение 3. Если хотите, чтобы тренинги были друг под другом, без разделения на колонки, установите значение 1. Применяется как на главной странице, так и для подтренингов.

`--training-min-height` — минимальная высота плашки тренинга. Например, если вы хотите добавить фоновые изображения для плашек тренингов, вам может потребоваться больше места на плашке. Эта переменная позволит увеличить высоту по всей школе. Или наоборот — уменьшить.

Установите значение `auto`, чтобы высота плашки тренинга подстраивалась под размер содержимого.

### Дополнительные переменные в версиях 1.1 и новее

Начиная с версии 1.1 в наборе появились переменные, позволяющие задать цвет фона, обводки и текста тренингов, а также цвет при наведении. Эти переменные находятся в том же файле и могут быть изменены вами по желанию. В файле добавлены комментарии перед каждой переменной для удобства.

<figure><img src="/files/HaO2XL40cNHQpjXyz2ED" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/ustanovka-nabora-stilei/zamena-cveta-i-dopolnitelnye-peremennye.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
