Давайте честно: Темная тема — это не кнопка «Инверсия цвета». И уж точно не «зальем фон черным, потому что на современных экранах это выглядит дорого». Темная тема — это полная перестройка физики света в вашем макете.

Если вы просто покрасите фон в черный, а текст в белый, пользователь устанет через 5 минут. У него начнут слезиться глаза из-за слишком высокого контраста, а при прокрутке текст будет смазываться. Скорее всего, он просто закроет приложение.

Хорошая темная тема не «выключает свет», она создает комфортные сумерки. Она снижает нагрузку, сохраняет иерархию.

1. Закон глубины: свет вместо тени

В светлой теме всё просто: чтобы приподнять карточку над фоном, мы добавляем тень. В темной теме тени не работают.

Представьте, что вы стоите в темной комнате, а сверху висит одна лампочка.

• Пол (самый низкий уровень) — самый темный.
• Стол (повыше) — ближе к лампе, значит, светлее.
• Книга на столе (еще выше) — еще светлее.

Как это работает в интерфейсе: Вместо того чтобы гадать, какой серый оттенок выбрать, используйте систему прозрачности:

• Уровень 0 (Фон): Темно-серый (почти черный).
• Уровень 1 (Карточки): Фон + слой белого с прозрачностью 5%.
• Уровень 2 (Модальные окна): Фон + слой белого с прозрачностью 7-8%.

Никогда не подбирайте серые цвета вручную («ну, вроде этот посветлее»). Накладывайте белый полупрозрачный слой на базовый темный фон. Так ваша палитра всегда будет системной и чистой, без грязных оттенков.

2. Закон типографики: приглуши белый

Новички часто совершают одну и ту же ошибку: берут чистый белый цвет и кладут его на темный фон. Почему это плохо? Контраст получается максимальным. Буквы начинают визуально «дрожать» и расплываться (эффект ореола). Читать такой текст — физически больно.

Мы выстраиваем иерархию текста не цветом, а прозрачностью белого:

• Заголовки (Высокий акцент): 87% (самый яркий, но не слепит).
• Основной текст (Средний акцент): 60% (комфортно для глаз).
• Неактивное / Подписи: 38%.