Розробка світлої теми (Light Mode) мобільного додатку
Нещодавно до нас прийшов клієнт з проектом фітнес-трекера: додаток на SwiftUI, 50+ екранів, темна тема вже готова, а світла — просто наслідує кольори з дизайн-макетів без системи. Через місяць тестування користувачі скаржилися, що на яскравому сонці текст нечитабельний, а кнопки зливаються з фоном. Типова ситуація: світла тема — це не просто інвертування кольорів, а продумана кольорова система з семантичними токенами, контрастними відношеннями та адаптацією під різні екрани. Ми взялися за проект і за 3 дні перебудували всю кольорову архітектуру — тепер додаток працює і на OLED, і на LCD, і в умовах різного освітлення. За 7 років ми реалізували light mode для 30+ проектів — від фітнес-трекерів до банківських додатків, і кожного разу семантичні токени прискорювали редизайн у 5–10 разів порівняно з прямими HEX-значеннями.
Чому семантичні токени — база світлої теми?
Типова помилка на початку проекту — використовувати конкретні 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. Економія часу на підтримці при такому підході сягає 70%.
| Підхід | Гнучкість | Час на редизайн | Ризик помилок |
|---|---|---|---|
| Прямі HEX-значення | Низька | 2-3 тижні | Високий |
| Семантичні токени | Висока | 2-3 дні | Низький |
Як правильно вибудувати типографічну шкалу?
Типографічна шкала — частина light theme. Не просто «розмір шрифту», а повна специфікація: font family, size, weight, line height, letter spacing для кожного текстового стилю. Мінімальний набір включає Display / Large Title, Headline, Body, Body Small, Caption, Overline. Кожен стиль повинен бути заданий в єдиному об'єкті — наприклад, Font.TextStyle у SwiftUI або Typography у Material Design.
На iOS шрифтова шкала будується на UIFont.preferredFont(forTextStyle:) — це Dynamic Type, який автоматично масштабується під користувацькі налаштування доступності. Ігнорувати Dynamic Type — означає зламати додаток для людей з порушеннями зору та отримати потенційний reject від Apple відповідно до App Store Review Guidelines Section 4.2.
| Рівень контрасту | Коефіцієнт | Рекомендація |
|---|---|---|
| AA (звичайний текст) | 4.5:1 | Мінімум для readability |
| AAA (звичайний текст) | 7:1 | Оптимально для доступності |
Як забезпечити контраст на різних екранах?
Контраст — критичний параметр для читабельності. WCAG AA вимагає 4.5:1 для тексту до 18pt та 3:1 для великого тексту і UI-елементів. Для продуктів з широкою аудиторією ми прагнемо до AAA (7:1) там, де це можливо без шкоди для дизайну. Перевіряємо контраст на кожному етапі — від макетів до фінального білда.
Інструменти перевірки: 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). Наші інженери підбирають параметри тіней так, щоб вони виглядали природно на будь-якому екрані та не вимивались при різному освітленні.
Часті помилки при реалізації тіней:
- Використання однієї тіні для всіх елементів (плоська ієрархія)
- Занадто висока opacity (тінь виглядає брудно)
- Ігнорування shadowColor на Android (за замовчуванням чорний — краще задати відтінок)
Що входить у нашу роботу
При замовленні розробки світлої теми ви отримуєте:
- Дизайн-систему кольорів — повний набір семантичних токенів з документацією та прикладами використання для iOS (SwiftUI/UIKit), Android (Jetpack Compose), Flutter.
- Типографічну шкалу зі специфікаціями для кожного стилю, включаючи Dynamic Type.
- Конфігурацію тіней з 3–4 рівнями та рекомендаціями щодо elevation.
- Перевірку контрастності за WCAG AA/AAA зі звітом.
- Вихідні файли в Asset Catalog / ThemeData — готові до інтеграції.
- Документацію з міграції та додавання dark mode в майбутньому.
- Підтримку протягом двох тижнів після здачі.
Терміни та як почати
Орієнтовний термін — від 1 до 3 днів залежно від обсягу додатку та наявності готової дизайн-системи. Вартість розраховується індивідуально після аналізу поточного коду та макетів. Ми гарантуємо, що світла тема пройде рев'ю Apple та Google Play без зауважень щодо доступності.
Зв'яжіться з нами, щоб оцінити ваш проект. Отримайте консультацію з впровадження семантичних токенів та контрастної кольорової схеми — це займе не більше години.