Темная сторона дизайна: Гайд по темной теме

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Закон цвета: убираем насыщенность

Темный фон «съедает» пространство, но усиливает яркость цветов. Ваш любимый насыщенный синий или красный, который отлично смотрелся на белом, в темной теме начнет выжигать сетчатку.

Быстрый тест: Возьмите свой яркий брендовый цвет и наложите на него 20% белого. Получится мягкий оттенок.

Вместо кроваво-красного цвета ошибки — нежный коралловый.
Вместо кислотно-синего — приглушенный голубой.

Темная тема — это не дань моде. Это уважение к пользователю, который открыл ваше приложение ночью. Сделайте ему комфортно, и он останется с вами надолго.