> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/cvetovye-temy.md).

# Цветовые темы

<div align="left"><figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FjWaR7LqxQwjaQlvaIhjU%2Fimage.png?alt=media&amp;token=306bfb77-0f77-413a-984a-1c18d9264869" alt=""><figcaption></figcaption></figure></div>

Компонент для настройки цветовых тем приложения.

**Свойства:**

* *<mark style="color:purple;">colorTheme</mark>* - выбор цветовой схемы из предложенных вариантов. На текущий момент представлены следующие стандартные темы:
  * **light** - светлая
  * **dark** - темная
  * **pastel** - пастельная

В качестве провайдера цветовых тем используется **ThemeProvider** модуля **styled-components**. Более подробное описание работы можно посмотреть в [документации](https://styled-components.com/docs/api#themeprovider) к данному модулю.

Ключевой функцией цветовых тем являются использование переменных для значений цветов, вместо статичных значений цвета. Так, например, если в качестве цвета текста переменную **textPrimary**, её значение для каждой цветовой темы будет изменяться (для светлой темы - *<mark style="color:green;">#0d0d0d</mark>*, для тёмной - *<mark style="color:green;">#e2e5e9</mark>*). Это необходимо для того, цвета не конкурировали друг с другом на экране в любой выбранной теме и соответствовали общему приоритету "внимания пользователя" элементов **UI** на экране.

Основные переменные, используемые для каждой цветовой темы:

```javascript

bgPrimary         // Основной цвет фона
bgSecondary       // Второстепенный цвет фона
bgTetriary        // Второстепенный цвет фона 2
bgQuaternary      // Второстепенный цвет фона 3
bgOther           // Частный случай цвета фона из макетов
bgProgress        // Частный случай цвета фона из макетов 2

bgBlue            // Цветной фон "синий"
bgYellow          // Цветной фон "жёлтый"
bgPink            // Цветной фон "розовый"
bgEcru            // Цветной фон "охра"

borderColor       // Основной цвет обводки элементов
borderHover       // Цвет обводки при наведении курсора
borderGray        // Альтернативный цвет обводки
borderTable       // Цвет обводки таблицы

textPrimary       // Основной цвет текста
textSecondary     // Второстепенный цвет текста
textTetriary      // Приглушенный цвет текста
textQuaternary    // Приглушенный цвет текста 2
textHint          // Цвет текста для подсказок и лейблов
textPlaceholder   // Цвет текста для placeholder-ов полей ввода
textSenary        // Цвет вспомогательного текста
textInput         // Цвет текста полей ввода
textTable         // Цвет текста таблицы

shadowPrimary     // Стиль основной тени элемента
colorWarning      // Цвет для предупреждений и ошибок

```

В данной версии компонента реализована возможность настраивать собственные цветовые темы. Как "с нуля", так и на основе одной из стандартных тем. Стандартные темы невозможно удалить из списка через редактор компонента. Элементы списка имеют следующие настройки:

* *<mark style="color:purple;">selectedConfig</mark>* - список доступных цветовых тем, каждая из которых имеет  поля:
  * *<mark style="color:purple;">id</mark>* - символьный код темы, используется для переключения, установки темы в качестве текущей
  * *<mark style="color:purple;">title</mark>* - наименование темы
  * *<mark style="color:purple;">baseTheme</mark>* - id темы из списка стандартных тем, цвета которой берутся за основу данной темы&#x20;
* *<mark style="color:purple;">dynamicConfig</mark>* - переменные цветов для цветовых тем. Элемент списка имеет следующие значения настроек:

  * *<mark style="color:purple;">id</mark>* - символьный код переменной
  * *<mark style="color:purple;">\[\*id темы\*]</mark>* - значения цвета для соответствующей темы из списка

Для примера, создадим тему  **"dusk"** на основе стандартной темы **"dark"**.

<div align="left"><figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FhUuJIolSelzGJULJL6BM%2Fimage.png?alt=media&amp;token=6a25b45b-99a9-4ef2-951d-dc13a1d14447" alt=""><figcaption></figcaption></figure></div>

Определим несколько переменных для цветов темы (в данном случае переопределим существующие переменные для цветов основного акцента и основного цвета текста):

<div align="left"><figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FhdouDiQtytWcjfaOiw0Z%2Fimage.png?alt=media&amp;token=b4dc9eb3-1cca-401a-8067-8939cc48f3e3" alt=""><figcaption></figcaption></figure></div>

Значения для остальных тем оставим пустыми. Для них будут использованы дефолтные значения, если переменная с таким именем уже существует. Если это новая переменная, и значение её цвета для конкретной темы не определено, то переменная будет игнорироваться.

После чего переключим тему на вновь созданную. Видим, что переопределение переменных для нашей темы работает:

<div align="left"><figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FZO8Q7nb0OtKBoPUiWDj7%2Fimage.png?alt=media&amp;token=c2009766-38b8-4526-95bd-f06ad536b9c3" alt=""><figcaption></figcaption></figure></div>