После обновления iOS на тёмную тему половина кнопок стала нечитаемой, а на Android приложение вылетает при переключении? Знакомая ситуация, если цвета зашиты в код. Мы внедряем dark mode с автоматическим переключением, семантическими токенами и контрастностью WCAG AA. Наш опыт показывает: правильная реализация увеличивает удержание пользователей на 20–30%, а ошибки в тёмной теме разрушают впечатление от приложения.
Как не надо: инверсия и 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() для инициализации.
Почему семантические токены — единственный правильный подход?
Семантические токены позволяют менять тему централизованно, без правки каждого экрана. Сравните: при хардкоде изменение цвета фона требует найти и заменить 50+ вхождений. С токенами — меняете значение одной переменной. Это в 5 раз быстрее и исключает ошибки. Согласно Apple HIG, использование системных цветов и семантических токенов обязательно для прохождения ревью (Section 4.2).
| Подход | Время изменения цвета | Риск ошибок | Гибкость |
|---|---|---|---|
| Хардкод | 30–60 минут (50+ правок) | Высокий | Низкая |
| Семантические токены | 2–5 минут | Низкий | Высокая |
Какие правила соблюдать для тёмной палитры?
Тёмная тема — не просто тёмный фон. Вот главные правила, которые нарушают чаще всего.
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.
| Тип текста | Минимальный контраст (WCAG AA) | Цель в тёмной теме |
|---|---|---|
| Обычный текст | 4.5:1 | 14:1 |
| Крупный текст (>=18pt) | 3:1 | 7:1 |
| Акцентные элементы | 3:1 | Адаптировано |
Акцентный цвет
Многие акцентные цвета в тёмной теме нужно чуть десатурировать и осветлить. Ярко-синий #2196F3 на тёмном фоне вибрирует и вызывает дискомфорт. #90CAF9 — правильная версия для dark mode.
Изображения и иллюстрации
Фото не меняются. Иллюстрации с белым фоном — проблема. Решение: SVG-иллюстрации с прозрачным фоном и адаптивными цветами через currentColor.
Динамическое переключение
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 в дизайн-системе (Figma Variables + code)
- Реализация динамического переключения темы
- Тестирование контрастности и читаемости (WCAG AA)
- Документация по использованию токенов и поддержка при релизе
Сроки ориентировочно
| Приложение | Срок |
|---|---|
| Новое, токены с нуля | 2–3 дня |
| Готовое, нужен рефакторинг цветов | 3–5 дней |
| Сложное, много кастомных компонентов | 5–7 дней |
Стоимость рассчитывается индивидуально после аудита проекта. Если хотите внедрить dark mode с гарантией качества, свяжитесь с нами — оценим проект бесплатно. Более 5 лет опыта и 50+ реализованных проектов в мобильной разработке. Закажите внедрение dark mode и получите консультацию.