# Установка цветовой темы Мессенджера

Переменные цветовой схемы Мессенджера устанавливаются через параметр `themeVariables` в конфиге виджета.

Пример:
```ts
const widget = createMultiChatsWidget({
    serviceId: -1,
    themeVariables: {
        'common-text-secondary': 'yellow',
    }
})
```

- [Установка цветовой темы Мессенджера](#установка-цветовой-темы-Мессенджера)
  - [Описание переменных](#описание-переменных)
    - [Общие цвета](#общие-цвета)
  - [Сообщения](#сообщения)
    - [Входящее сообщение](#входящее-сообщение)
    - [Исходящее сообщение](#исходящее-сообщение)
    - [MessageButton](#messagebutton)
  - [UI Элементы](#ui-элементы)
    - [Badge](#badge)
    - [Button](#button)
    - [IconButton](#iconbutton)
    - [Checkbox/Switch](#checkboxswitch)
    - [Input/Textarea](#inputtextarea)
    - [Toast](#toast)
    - [Menu](#menu)
    - [Loader](#loader)
  - [Установка цветов виджета](#установка-цветов-виджета)
## Описание переменных

Для начала цвета светлой и темной тем можно посмотреть на скриншоте `./themes-colors.png`

### Общие цвета

| Название               | Описание | Значение по умолчанию в светлой теме |
|------------------------|----------|--------------------------------------|
| `common-bg` | Основной фоновый цвет, используется на списке чатов | `#fff`  |
| `common-bg-secondary` | Дополнительный фоновый цвет, используется, как правило, поверх элементов с цветом основного фона: подложка баннеров, плейсхолдер иконки, скелетоны | `#f5f5f5`  |
| `common-bg-poll` | Цвет фона бэкграунда выбора опросов | `rgba(255, 255, 255, 0.85)`  |
| `conversation-background-color` | Цвет фона чата | `var(--common-bg)`  |
| `common-text-primary` | Основной цвет текста: названия чатов, заголовки экранов, текст в элементах списка | `#000`  |
| `common-text-secondary` | Второстепенный цвет текста: статусы, пояснения. Используется, как правило, в конструкциях где уже есть основной текст | `#999`  |
| `common-icons-primary` | Основной цвет иконок, обычно такие иконки вызывают переходы на другой экран | `#000`  |
| `common-icons-secondary` | Второстепенный цвет иконок, используется в интерфейсах, где нет перехода на другой экран, но есть изменения на текущем экране: переключение между категориями эмодзи, вызов панели стикеров и т. п.  | `#a6a6a6`  |
| `common-divider` | Цвет для разнообразных разделителей | `#ededed`  |
| `common-settings-item` | Цвет элементов списка внутри секции настроек, если нужно цветом отделить секцию от фона | `var(--common-bg)`  |
| `common-settings-bg` | Цвет фона экранов с секциями настроек, если нужно цветом отделить секцию от фона | `var(--common-bg)`  |
| `common-actionbar` | Цвет разнообразных тулбаров. Как правило, такие тулбары расположены поверх основного фона common/bg  | `var(--common-bg)`  |
| `common-accent` | Акцентный цвет для фона кнопок | `#2abcbc`  |
| `common-accent-text` | Акцентный цвет для текстовых кнопок | `#00a8a8`  |
| `common-accent-fg` | Цвет текста (иконки) для кнопок с акцентным бэкграундом | var(--common-bg)`  |
| `common-online` | Цвет для отображения статуса пользователя (онлайн или нет) | `#2dcbcb`  |
| `common-destructive` | Цвет деструктивных действий: выход, удаление и т. п.  | `#f65151`  |
| `common-counter` | Цвет активных каунтеров | `#00a8a8`  |
| `overlay-background-color` | Цвет для фона информации (дата/статус), если сообщение содержит изображение/стикер  | `#000`  |
| `overlay-primary-color` | Цвет для текста информации (дата/статус), если сообщение содержит изображение/стикер | `#fafafa`  |
| `overlay-secondary-color` | Цвет имени пользователя в лайтбоксе | `var(--common-text-secondary)`  |
| `overlay-shadow-color` | Цвет фона модальных окон | `rgba(0, 0, 0, .15)`  |
| `msg-sticker-size` | Размер стикера (ширина=высота) | `180px`  |
| `ui-scrollbar-color` | Цвет скроллбара | `var(--common-text-primary)`  |
| `ui-compose-border-color` | Цвет верхнего бордера у поля ввода сообщения | `transparent`  |
| `ui-list-separator-color` | Цвет разделителя списков (например списка чатов) | `var(--common-divider)`  |
| `ui-popup-bg` | Фон попапов (меню сообщения/чата) | `var(--common-settings-bg)`  |
| `alice-oknyx-background` | Фон иконки Алисы (в чате Алисы) | `linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 27%)`  |

## Сообщения

### Входящее сообщение

| Название | Описание | Значение по умолчанию в светлой теме |
|----------|----------|--------------------------------------|
| `incoming-primary` | Основной цвет для текста входящего | `#000000`  |
| `incoming-secondary` | Второстепенный цвет для текста/иконок/времени отправки, статуса и т. п.  | `#999999`  |
| `incoming-link` | Цвет ссылки | `#6682cc` |
| `incoming-bg` | Цвет баббла входящего сообщения | `#f2f2f2`  |
| `incoming-button` | Цвет подложки под иконкой для бабблов голосовых, файлов и т. п.  | `#ffffff`  |

### Исходящее сообщение

| Название | Описание | Значение по умолчанию в светлой теме |
|----------|----------|--------------------------------------|
| `outgoing-primary` | Основной цвет для текста исходящего сообщения | `#000000`  |
| `outgoing-secondary` | Второстепенный цвет для текста/иконок/времени отправки, статуса и т. п.  | `#0a97a7`  |
| `outgoing-link` | Цвет ссылки исходящего сообщения | `#6682cc`  |
| `outgoing-bg` | Цвет баббла исходящего сообщения | `#e0f3f5`  |
| `outgoing-button` | Цвет подложки под иконкой для бабблов голосовых, файлов и т. п.  | `#ffffff`  |

### MessageButton

Инлайн кнопки в сообщениях

| Название | Описание | Значение по умолчанию в светлой теме |
|----------|----------|--------------------------------------|
| `component-message-button-background-color` | Фон инлайн кнопки в сообщении | `var(--conversation-bg)`  |
| `component-message-button-text-color` | Цвет текста инлайн кнопки в сообщении | `var(--common-accent-text)`  |
| `component-message-button-border-color` | Цвет границы инлайн кнопки в сообщении | `currentColor`  |

## UI Элементы

Мессенджер не гарантирует постоянную работу этих переменных

### Badge

Счетчики непрочинаттых сообщений

| Название | Описание | Значение по умолчанию в светлой теме |
|----------|----------|--------------------------------------|
| `ui-badge-text-color` | Цвет текста | `var(--common-bg)`  |
| `ui-badge-bg-accent` | Фон для акцентного бейджа | `var(--common-counter)`  |
| `ui-badge-bg` | Фон (используется для замьюченных чатов) | `var(--common-text-secondary)`  |

### Button

Кнопки (попап создания чата/настройки/модальные окна)

| Название | Описание | Значение по умолчанию в светлой теме |
|----------|----------|--------------------------------------|
| `ui-button-bg-accent` | Фон кнопки | `var(--common-accent)`  |
| `ui-button-text-color-primary` | Цвет текста кнопки | `var(--common-bg-secondary)`  |
| `ui-button-bg` | Второстепенный цвет кнопки | `var(--common-bg-secondary)`  |
| `ui-button-text-color` | Цвет текста второстепенной кнопки | `var(--common-accent)`  |
| `ui-buttons-row-text` | Цвет текста в ряду кнопок (максимальное количество участников в групповом чате при добавлении) | `var(--common-text-secondary)`  |

### IconButton

Кнопка с иконкой

| Название | Описание | Значение по умолчанию в светлой теме |
|----------|----------|--------------------------------------|
| `ui-icon-button-primary` | Цвет иконки | `var(--common-icons-primary)`  |
| `ui-icon-button-secondary` | Цвет второстепенной иконки | `var(--common-icons-secondary)`  |
| `ui-icon-button-accent` | Цвет акцентной иконки | `var(--common-accent)`  |
| `ui-icon-button-destructive` | Цвет деструктивной иконки | `var(--common-destructive)`  |
| `ui-icon-button-highlighted` | Фон иконки при наведении мышки | `var(--common-bg-secondary)`  |

### Checkbox/Switch

| Название | Описание | Значение по умолчанию в светлой теме |
|----------|----------|--------------------------------------|
| `ui-checkbox-bg` | Фон чекбокса | `var(--common-bg)`  |
| `ui-checkbox-checked-color` | Цвет выделенного чекбокса | `var(--common-accent)`  |
| `ui-switch-bg` | Фон свитча | `var(--common-text-secondary)`  |
| `ui-switch-color` | Цвет текст | `var(--common-bg)`  |
| `ui-switch-accent` | | `var(--common-accent)`  |
| `ui-switch-spinner-color` | Цвет спиннера в чекбоксе | `var(--common-text-secondary)`  |
| `ui-switch-spinner-accent` | Цвет акцентного спиннера в чекбоксе | `var(--common-accent)`  |

### Input/Textarea

Поле ввода/многострочное поле ввода

| Название | Описание | Значение по умолчанию в светлой теме |
|----------|----------|--------------------------------------|
| `ui-input-bg` | Фон поля ввода | `var(--common-bg-secondary)`  |
| `ui-input-text-primary` | Текст поля ввода | `var(--common-text-primary)`  |
| `ui-input-text-secondary` | Второстепенный текст поля ввода | `var(--common-text-secondary)`  |
| `ui-textarea-bg` | Фон многострочного поля ввода | `var(--common-bg-secondary)`  |
| `ui-textarea-text-color` | Текст многострочного поля ввода | `var(--common-text-primary)`  |
| `ui-textarea-text-secondary` | Второстепенный текст многострочного поля ввода | `var(--common-text-secondary)`  |
| `ui-textarea-placeholder-color` | Цвет плейсхолдера многострочного поля ввода | `var(--common-text-secondary)`  |

### Toast

Всплывающее уведомление

| `ui-toast-text-color` | Текст всплывающего уведомления | `#efefef`  |
| `ui-toast-background-color` | Фон всплывающего уведомления | `#000`  |

### Menu

Меню (выбор темы/устройства для звонка)

| `ui-menu-text-primary` | Цвет элемента меню | `var(--common-text-primary)`  |
| `ui-menu-hover-color` | Фон элемента меню при наведении мышки | `var(--common-bg-secondary)`  |

### Loader

Спиннер, появляется в местах подгрузки контента - поиск участников/глобальный поиск

| `ui-progress-color` | Цвет спиннера | `var(--overlay-background-color)`  |
| `ui-loader-color` | Цвет лоадера (спиннер) | `var(--common-bg)`  |

## Установка цветов виджета

Для установки цветов виджета используйте CSS-переменные, описанные в документации к каждому из UI.