Цветовая схема
Класс ChatColors
предоставляет набор унифицированных цветов, используемых в интерфейсе чата. Поддерживает адаптацию под светлую и тёмную темы при помощи динамических цветов. Но для разделения логики и более точной настройки, рекомендуется настраивать цвета отдельно, в рамках темной и светлой темы.
Описание
ChatColors
— это базовый класс, который содержит предопределённые цветовые токены.
Цвета реализованы через метод .colorFor(light:dark:)
, что позволяет автоматически переключаться между светлой и тёмной палитрами в зависимости от текущей темы системы в рамках одной установленной темы (в рамках смены темы при настройках по-умолчанию).
Этот класс может быть использован как часть дизайн-системы или темизации в приложении.
Цвета по категориям
🖌️ Основные цвета текста
Переменная | Назначение | 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 |
Пример использования
Актуальный пример можно найти в демо приложении в MainViewController+Themes
import ChatCenterUI
/// Настройки тем оформления
extension MainViewController {
func makeDarkTheme() -> ChatTheme {
return ChatTheme(colors: colors)
}
private var colors: ChatColors {
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)
return colors
}