Разработка темной темы (Dark Mode) мобильного приложения
Dark mode — это не «сделать всё тёмным». Это параллельная цветовая система, которая должна обеспечивать те же контрастные отношения, иерархию и читаемость, что и светлая тема. Если просто инвертировать цвета — получите что-то визуально некорректное: тени станут светлее фона, акцентный цвет потеряет насыщенность, изображения будут вырываться из контекста.
Как не надо: инверсия и hardcoded цвета
Первая и самая дорогостоящая ошибка — использовать захардкоженные цвета вместо семантических токенов. Color.white, #FFFFFF, UIColor(red:1 green:1 blue:1 alpha:1) — всё это ломается при переключении темы. Исправлять это потом в готовом приложении — переписывать все UI-компоненты.
Правильный подход — семантические токены: background.primary, text.secondary, surface.elevated, accent.default. На iOS это UIColor.systemBackground, UIColor.label, UIColor.secondaryLabel и кастомные цвета через Asset Catalog с Light и Dark вариантами. На Android — Material Design 3 с colorScheme через MaterialTheme.colorScheme.surface, onSurface, surfaceVariant.
В Flutter: ThemeData.light() и ThemeData.dark() с полным набором ColorScheme, переключение через MaterialApp(themeMode: ...). В React Native: useColorScheme() hook из ядра + Appearance.getColorScheme() для инициализации.
Правила для тёмной палитры
Тёмная тема — не просто тёмный фон. Несколько правил, которые нарушают чаще всего:
Elevation через осветление, не тени. В Material Design 3 поверхности на разных уровнях z-index в тёмной теме различаются яркостью: чем выше, тем светлее. surface → surfaceContainer → surfaceContainerHigh. Тени в тёмной теме почти невидимы — они заменяются тональным разделением.
Контраст текста. WCAG AA требует минимум 4.5:1 для обычного текста. Белый #FFFFFF на тёмном #121212 = 18.1:1 — слишком высокий, утомляет глаза. Оптимально #E0E0E0 на #121212 = 14.7:1. Google рекомендует #FFFFFF с opacity 87% для primary text.
Акцентный цвет. Многие акцентные цвета в тёмной теме нужно чуть десатурировать и осветлить. Ярко-синий #2196F3 на тёмном фоне вибрирует и вызывает дискомфорт. #90CAF9 — правильная версия для dark mode.
Изображения и иллюстрации. Фото не меняются. Иллюстрации с белым фоном — проблема. Решение: SVG-иллюстрации с прозрачным фоном и адаптивными цветами через currentColor.
Динамическое переключение
iOS с iOS 13 поддерживает traitCollectionDidChange — система автоматически сообщает об изменении темы. SwiftUI перерисовывает с @Environment(\.colorScheme). UIKit требует явного override func traitCollectionDidChange.
Android: AppCompatDelegate.setDefaultNightMode() для программного переключения. DayNight тема в styles.xml. Активность перезапускается при смене темы — нужно сохранять состояние через ViewModel или onSaveInstanceState.
Важный edge case: пользователь меняет тему в системных настройках, пока приложение открыто на фоне. При выходе на передний план приложение должно применить новую тему без заметного мигания. На Android это recreate() активности или configChanges: uiMode в манифесте с ручной обработкой.
Тестирование тёмной темы
Три уровня:
- Figma — все компоненты с light/dark вариантами через Figma Variables
- Симулятор/эмулятор — переключение через быстрые настройки
- Физическое устройство в OLED-режиме (iPhone 12+, Samsung Galaxy) — проверяем «чистоту» чёрного, отсутствие halo-эффекта вокруг светлых элементов
Инструменты: Xcode Accessibility Inspector для проверки контраста, Android Accessibility Scanner. Проверяем все экраны, все модальные окна, все алёрты — они часто используют системные цвета и ломаются в первую очередь.
Процесс и сроки
Аудит существующей кодовой базы (найти все hardcoded цвета) → рефакторинг на токены → создание dark palette в дизайн-системе → реализация → тестирование.
| Приложение | Срок |
|---|---|
| Новое, токены с нуля | 2–3 дня |
| Готовое, нужен рефакторинг цветов | 3–5 дней |
| Сложное, много кастомных компонентов | 5–7 дней |
Стоимость рассчитывается индивидуально после аудита проекта.