Разработка светлой темы (Light Mode) мобильного приложения
Light mode — базовая тема большинства мобильных приложений. Но «светлая тема» не значит «просто белый фон с тёмным текстом». Это продуманная цветовая система с семантическими токенами, которая корректно работает при разном освещении, на OLED и LCD экранах, и не разваливается при добавлении будущего dark mode.
Цветовая система: токены вместо значений
Типичная ошибка в начале проекта — использовать конкретные HEX-значения напрямую в компонентах. Работает поначалу, но при первом же редизайне или добавлении тёмной темы превращается в nightmare: 200 мест с #F5F5F5, которые нужно найти и заменить.
Правильный подход — семантические токены с момента старта:
-
background.primary— основной фон экранов -
background.secondary— фон карточек, sidebar -
surface.default— поверхность компонентов -
text.primary,text.secondary,text.disabled -
accent.default,accent.pressed,accent.disabled -
border.default,border.focused
На iOS реализуется через UIColor named colors в Asset Catalog (Color Set с одним Light вариантом сейчас, Dark позже). В SwiftUI — через Color("backgroundPrimary") или кастомный extension Color. На Android — Material Design 3 ColorScheme через MaterialTheme. Flutter — ThemeData с полным ColorScheme.
Типографика и spacing
Типографическая шкала — часть light theme. Не просто «размер шрифта», а полная спецификация: font family, size, weight, line height, letter spacing для каждого текстового стиля. Минимальный набор:
- Display / Large Title
- Headline
- Body, Body Small
- Caption, Overline
На iOS шрифтовая шкала может строиться на UIFont.preferredFont(forTextStyle:) — это Dynamic Type, который автоматически масштабируется под пользовательские настройки доступности. Игнорировать Dynamic Type — значит сломать приложение для людей с нарушением зрения и получить потенциальный reject от Apple.
Контраст и доступность (Accessibility)
WCAG AA: 4.5:1 для текста до 18pt, 3:1 для крупного текста и UI-элементов. Это минимум. Для продуктов с широкой аудиторией стремимся к AAA там, где это возможно без ущерба для дизайна.
Инструменты проверки: Figma плагин A11y - Color Contrast Checker, Xcode Accessibility Inspector, Android Accessibility Scanner. Проверяем не только основной текст, но и placeholder-текст в полях (часто грешит низким контрастом), disabled состояния.
Тени и elevation
В light mode тени — основной способ показать иерархию слоёв. Material Design 3 использует elevation + shadowColor. iOS UIKit — layer.shadowOffset, shadowRadius, shadowOpacity. Ошибка: одинаковая тень для всех компонентов. Правило: 3–4 уровня теней, от subtle (карточка в списке) до prominent (modal, bottom sheet).
Срок — 1–3 дня в зависимости от объёма приложения и наличия готовой дизайн-системы. Стоимость рассчитывается индивидуально.