> 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/upravlenie-temoi-podderzhka-prekrashena.md).

# Управление темой (поддержка прекращена)

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F0bkndKTuU7DPs3HOjc9l%2Ftheme.png?alt=media\&token=8cb4d21b-5a32-47ae-9b10-b4c14f61b61b)

Компонент для выбора готовой цветовой схемы сайта.

{% hint style="info" %} <mark style="color:red;">Поддержка компонента прекращена. Воспользуйтесь компонентом "Цветовые темы"</mark>
{% endhint %}

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

* *<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      // Цвет для предупреждений и ошибок

```