Цветовые темы: цвета не пишем в коде

Правило: в коде не должно быть цветов числами. Цвет берётся из текущей цветовой схемы по смыслу. Тем будет несколько (тёмная, светлая и другие), и одна и та же деталь интерфейса должна выглядеть правильно в каждой.

Почему так: если цвет вписан числом, при смене темы он останется прежним — и на светлом фоне окажется тёмно-серый текст, тёмная тень или невидимая граница. Такие места обычно находят уже у пользователя.

Как это выглядит в коде

Неправильно

Text(
    text = "Диалоги",
    color = Color(0xFFEBEBEB),                    // цвет вписан числом
    modifier = Modifier.background(Color(0xFF17212B))   // и здесь тоже
)

При смене темы этот текст останется белым, а панель — тёмно-синей. В светлой теме получится белое на белом.

Правильно

Text(
    text = "Диалоги",
    color = MaterialTheme.colorScheme.onSurface,
    modifier = Modifier.background(MaterialTheme.colorScheme.surface)
)

Здесь сказано что это по смыслу: текст «на поверхности» и сама «поверхность». Какие именно цвета — решает схема, а не код.

Имена по смыслу, а не по виду

Хорошо (по смыслу)	Плохо (по виду)
`surface` — поверхность	`darkBlue` — тёмно-синий
`onSurface` — текст на поверхности	`almostWhite` — почти белый
`primary` — главный акцент	`blue` — синий
`error` — ошибка	`red` — красный
`outline` — границы	`greyLine` — серая линия

Смысл от смены темы не меняется, а название цвета — меняется. darkBlue в светлой теме станет ложью в самом названии.

Что именно берётся из схемы

Проверять надо все цвета, а не только текст с фоном. Чаще всего забывают:

границы — outline, outlineVariant;
фон «наведения» курсора и выбранной строки;
тени вокруг окон;
затемнение под окном (полупрозрачное чёрное — тоже цвет);
цвет неактивного текста — подписи, время, пояснения;
цвет состояния — «на связи» зелёным, «не отвечает» красным;
фон поля ввода и его рамку при фокусе;
цвет значков и кружка непрочитанных;
фон блока кода и цвет ссылок в ответах ассистента;
полосы прокрутки;
выделение текста мышью.

Если деталь где-то не переключилась — она выбивается и её видно сразу.

Особый случай: цвета для различения ассистентов

Эти цвета из схемы не берутся. Пользователь задаёт их сам в настройках, чтобы отличать ассистентов друг от друга. Они заданы сознательно и в другой теме остаются собой — иначе различие пропадёт.

То есть в клиенте два разных типа цвета, и путать их нельзя:

Тип	Откуда	Меняется ли с темой
Цвета интерфейса	Из цветовой схемы	Да
Цвет или картинка ассистента	Заданы пользователем	Нет

Практический вывод: там, где подставляется цвет ассистента, нельзя брать MaterialTheme.colorScheme.* — нужен именно пользовательский цвет. И наоборот: фон строки диалога берётся из схемы, даже если рядом стоит цветная полоска агента.

Ещё следствие: пользовательский цвет должен читаться на фоне любой темы. Пять предложенных цветов подобраны под тёмную тему; в светлой какие-то могут оказаться бледными. Это надо проверить отдельно — либо ограничить набор безопасными цветами, либо подстраивать яркость под тему.

Что писать в макетах

В sketches/ и approved/ цвета стоят числами — так и надо, иначе макет не будет выглядеть задуманным. Это не код.

Правило простое:

макеты — числа, чтобы было видно замысел;
код — имена из схемы, чтобы переключалось.

Проверка при реализации: поиск по коду на цвета числами и на «#». Что нашлось — то и надо заменить на схему. Исключение — цвета ассистентов из настроек (см. выше) и, возможно, значения внутри самой схемы, где цвета как раз и задаются.

Готовый образец у нас уже есть

В ai/assistent, файл client-shared/.../ui/FolderTheme.kt — тема описана отдельным объектом, с именем, и в комментарии сказано: «Сейчас — одна тёмная тема; в будущем — переключатель тем (светлая/тёмная)». Идею берём, детали —

Чего в образце нет: он соблюдается не везде. В том же клиенте 36 цветов вписаны числами прямо в экранах (Color(0xFF4CAF50) и подобные). Тема есть, а половина цветов идёт мимо неё. Поэтому наш подход строже:

ни одного цвета числом вне самой схемы — все цвета живут в одном месте;
именованные значения для смыслов — тоже в теме, а не в экране;
проверяем на второй теме — пока не переключили тему и не посмотрели, считать готовым нельзя.

Разбор — BORROW-FROM-ASSISTENT.md, п. 3.10.

Что осталось решить

Какие темы будут кроме тёмной. Пока известно только: тёмная есть, светлая предполагается.
Переключается ли тема в клиенте или берётся системная (как в системе — тёмная/светлая). От этого зависит, нужен ли в настройках отдельный переключатель.
Что делать с цветами ассистентов в светлой теме (см. выше) — проверять читаемость или ограничить набор.

8.1 KiB Raw Blame History Unescape Escape