Цветовая схема
Класс ChatColors предоставляет набор унифицированных цветов, используемых в интерфейсе чата. Поддерживает адаптацию под светлую и тёмную темы при помощи динамических цветов. Но для разделения логики и более точной настройки рекомендуется настраивать цвета отдельно, в рамках тёмной и светлой тем.
Описание
ChatColors — это базовый класс, который содержит предопределённые цветовые токены.
Цвета реализованы через метод .colorFor(light:dark:), что позволяет автоматически переключаться между светлой и тёмной палитрами в зависимости от текущей темы системы в рамках одной установленной темы (в рамках смены темы при настройках по-умолчанию).
Этот класс может быть использован как часть дизайн‑системы или темизации в приложении.
Сводная таблица свойств
Все свойства ChatColors имеют значения по умолчанию и необязательны для переопределения.
| Свойство | Light (по умолчанию) | Dark (по умолчанию) | Где используется |
|---|---|---|---|
main | #191E23 | #E1E1EA | Основной текст сообщений, имена операторов, системный текст |
secondary | #777B7E | #B0B0BA | Время сообщений, placeholder в поле ввода, имя оператора под аватаром |
disabled | #9FA5A9 | #8A8A8E | Отключённые кнопки и поля ввода |
background | #F1F1F7 | #1C1C1E | Фон экранов чата и поиска |
backgroundWhite | #FFFFFF | #2C2C2F | Пузыри входящих сообщений, карточки, меню вложений |
link | #007AFF | #007AFF | Ссылки в тексте, кнопки действий, курсор в поле ввода |
linkLight | #4EAAFF | #4EAAFF | Акцентный фон кнопок, лёгкий вариант ссылки |
positive | #09A460 | #09A460 | Статус «прочитано», иконка успешной отправки |
warning | #FFC043 | #FFC043 | Предупреждающие статусы, иконка снуза |
error | #AF1400 | #E11900 | Текст и иконка ошибки отправки сообщения |
errorLight | #E11900 | #FF594C | Фон/обводка элементов в состоянии ошибки |
Если свойство не переопределено — используется значение по умолчанию из таблицы выше. Переопределять нужно только те свойства, которые не совпадают с вашим брендом.
Цвета по категориям
Основные цвета текста
| Переменная | Назначение | Light | Dark |
|---|---|---|---|
main | Основной цвет текста | #191E23 | #E1E1EA |
secondary | Второстепенный текст | #777B7E | #B0B0BA |
disabled | Текст/иконки в состоянии disabled | #9FA5A9 | #8A8A8E |
Фоновые цвета
| Переменная | Назначение | Light | Dark |
|---|---|---|---|
background | Основной фон экрана | #F1F1F7 | #1C1C1E |
backgroundWhite | Белый фон | #FFFFFF | #2C2C2F |
Цвета ссылок
| Переменная | Назначение | Light / Dark |
|---|---|---|
link | Основная ссылка | #007AFF |
linkLight | Легкая вариация ссылки | #4EAAFF |
Положительные действия
| Переменная | Назначение | Light / Dark |
|---|---|---|
positive | Цвет для позитивных действий | #09A460 |
Предупреждения
| Переменная | Назначение | Light / Dark |
|---|---|---|
warning | Цвет для предупреждающих статусов | #FFC043 |
Ошибки
| Переменная | Назначение | Light | Dark |
|---|---|---|---|
error | Основной цвет ошибки | #AF1400 | #E11900 |
errorLight | Легкая вариация ошибки | #E11900 | #FF594C |
Соответствие Figma и SDK
На странице Foundation → Colors в Figma цвета организованы по категориям. Ниже приведено соответствие между категориями Figma и токенами ChatColors:
| Категория в Figma | Описание в Figma | Токен SDK |
|---|---|---|
| Базовые цвета текста и фона | Основной и вспомогательный текст | main, secondary, disabled |
| Базовые цвета текста и фона | Фон экрана | background, backgroundWhite |
| Цвет ссылок | Определяется системой, акценты | link, linkLight |
| Предупреждения | Предупреждающие статусы | warning |
| Ошибки | Ошибки и критические состояния | error, errorLight |
| Успешные операции | Положительный результат | positive |
| Вторичный цвет | Secondary brand color (7 вариантов в Figma) | нет прямого токена — задаётся через стили компонентов |
| Цвета полупрозрачного затенения | Оверлеи, затемнение фона | Настраиваются через стили компонентов |
| Background (компонент) | Solid Grey / Colored фон (Light/Dark) | background, backgroundWhite |
В Figma представлена расширенная палитра с промежуточными оттенками (Primary — 4 варианта, Secondary — 7 вариантов). Токены SDK покрывают основные значения; детальная настройка оттенков доступна через стили компонентов.
Доступность (Accessibility)
Значения по умолчанию (ChatColors) спроектированы с учётом WCAG AA для светлой и тёмной тем. При кастомизации цветов проверяйте контрастность пары «цвет текста / цвет фона» — например, через Xcode Accessibility Inspector.
Создание цветовых ассетов
Способ 1 — Color Set в xcassets (рекомендуется)
Позволяет задать разные цвета для светлой и тёмной тем в одном ассете:
- В Xcode откройте
Assets.xcassets - Нажмите + → Color Set
- Назовите ассет (например,
BrandColor) - В инспекторе выберите Appearances → Any, Dark
- Задайте цвет для Any (светлая) и Dark (тёмная тема)
// Загрузка с fallback на случай, если ассет не найден
colors.link = UIColor(named: "BrandColor") ?? .systemBlue
Способ 2 — Динамический UIColor без xcassets
Если цвета задаются программно:
let adaptiveColor = UIColor { traitCollection in
traitCollection.userInterfaceStyle == .dark
? UIColor(red: 0.31, green: 0.67, blue: 1.0, alpha: 1) // тёмная тема
: UIColor(red: 0.0, green: 0.48, blue: 1.0, alpha: 1) // светлая тема
}
colors.link = adaptiveColor
Этот подход позволяет использовать одну ChatColors для обеих тем, не создавая отдельный darkTheme. Однако для разных цветовых схем (не только оттенков) предпочтительнее создавать два отдельных объекта ChatColors и передавать их через theme и darkTheme.
Способ 3 — Раздельные темы
Максимальный контроль над светлой и тёмной темами:
// Светлая тема
let lightColors = ChatColors()
lightColors.main = .black
lightColors.background = .white
lightColors.link = UIColor(named: "BrandBlue") ?? .systemBlue
// Тёмная тема — отдельный объект
let darkColors = ChatColors()
darkColors.main = .white
darkColors.background = UIColor(named: "BackgroundDark") ?? .black
darkColors.link = UIColor(named: "BrandBlueDark") ?? .systemBlue
chatCenterSDK.theme = ChatTheme(colors: lightColors)
chatCenterSDK.darkTheme = ChatTheme(colors: darkColors)
Пример использования
Актуальный пример можно найти в демо-приложении в MainViewController+Custom.swift.
let colors = ChatColors()
colors.main = UIColor(named: "MainColor") ?? .black
colors.secondary = UIColor(named: "SecondaryColor") ?? .systemGreen
colors.disabled = .systemGray3
colors.background = .systemBackground
colors.backgroundWhite = .systemFill
colors.link = .systemBlue
colors.linkLight = .systemBlue.withAlphaComponent(0.7)
colors.positive = UIColor(named: "SecondaryColor") ?? .systemTeal
colors.warning = .systemOrange
colors.error = .systemRed
colors.errorLight = .systemRed.withAlphaComponent(0.7)
let theme = ChatTheme(colors: colors)
chatCenterSDK.theme = theme
Альтернативный способ — фабричный метод build:
let colors = ChatColors.build { colors in
colors.main = .black
colors.background = .systemBackground
colors.link = .systemBlue
}
Ограничения (что не поддерживается из Figma)
Figma-дизайн может содержать эффекты, которые SDK не поддерживает напрямую:
| Эффект в Figma | Статус в SDK | Альтернатива |
|---|---|---|
| Градиенты (линейный, радиальный) | Не поддерживаются | Используйте solid-цвет — выберите один доминирующий оттенок |
| Drop Shadow (сложные конфигурации) | Частично | cornerRadius есть в стилях; shadow не настраивается публично |
| Blur / Frosted Glass | Не поддерживаются | Используйте solid-цвет с нужной прозрачностью |
| Semi-transparent overlays | Частично | Задайте цвет через UIColor(white: 0 alpha: 0.4) |
| Вторичный брендовый цвет (7 вариантов Figma) | Нет прямого токена | Настраивается через стили конкретных компонентов |
Если нужный эффект отсутствует — обратитесь к команде разработки SDK.