Реалізація Theming Engine для White-Label мобільного додатку

Без движка тематизації кожна зміна дизайну white-label додатку вимагає перескладання та релізу. Один з наших клієнтів витрачав 72 людино-години на місяць на оновлення теми для 15 брендів. Після впровадження Theming Engine це завдання скоротилося до однієї години: достатньо завантажити новий JSON-конфіг на сервер. Підсумок: економія 98% часу та повна гнучкість. Наш підхід до зміни теми швидше за статичний реліз у 43 200 разів (2 секунди проти 24 годин). У нас 6+ років досвіду в white-label розробці, реалізовано понад 30 проектів з динамічним налаштуванням. Вартість впровадження починається від $5000 для нового проекту. Якщо вам потрібно гнучко керувати зовнішнім виглядом десятків брендів, пишіть нам — ми оцінимо ваш проект.

Як Theming Engine покращує white-label додатки?

Theming Engine — це система керування візуальними параметрами додатку через дизайн-токени. Всі кольори, шрифти, розміри, радіуси кутів та тіні виносяться в JSON-конфіг, який завантажується при старті або підмінюється в runtime. Це дозволяє реалізувати зміну теми без перескладання, підтримувати сотні брендів в одному білді та адаптувати інтерфейс під користувацькі вподобання. Єдина конфігурація зовнішнього вигляду для всіх брендів спрощує підтримку.

Структура конфігу (приклад для tenant "Brand B")

{ "tenant": "brand_b", "version": "2", "colors": { "primary": "#1A73E8", "primary_variant": "#1557B0", "secondary": "#FB8C00", "background": "#FFFFFF", "surface": "#F5F5F5", "error": "#B00020", "on_primary": "#FFFFFF", "on_secondary": "#000000" }, "typography": { "font_family": "Inter", "scale_factor": 1.0 }, "shape": { "card_corner_radius": 12, "button_corner_radius": 8, "input_corner_radius": 4 }, "assets": { "logo_url": "https://cdn.brand-b.com/logo.png", "splash_bg_color": "#1A73E8" } } 

Порівняння статичного та динамічного підходів

Час впровадження по платформах (приблизний)

Як реалізувати динамічне налаштування на Jetpack Compose?

Jetpack Compose робить runtime-тематизацію значно простіше, ніж XML: MaterialTheme приймає ColorScheme та Typography як параметри і застосовує їх до всього дерева компонентів.

// Завантаження та парсинг теми в Compose @Composable fun TenantThemedApp(theme: TenantTheme, content: @Composable () -> Unit) { val colorScheme = lightColorScheme( primary = Color(android.graphics.Color.parseColor(theme.colors.primary)), primaryContainer = Color(android.graphics.Color.parseColor(theme.colors.primaryVariant)), secondary = Color(android.graphics.Color.parseColor(theme.colors.secondary)), background = Color(android.graphics.Color.parseColor(theme.colors.background)), surface = Color(android.graphics.Color.parseColor(theme.colors.surface)), error = Color(android.graphics.Color.parseColor(theme.colors.error)) ) val shapes = Shapes( small = RoundedCornerShape(theme.shapes.inputCornerRadius.dp), medium = RoundedCornerShape(theme.shapes.cardCornerRadius.dp), large = RoundedCornerShape(theme.shapes.buttonCornerRadius.dp) ) MaterialTheme(colorScheme = colorScheme, shapes = shapes, content = content) } // Використання в Activity setContent { val theme by themeViewModel.tenantTheme.collectAsState() TenantThemedApp(theme = theme) { AppNavHost() } } 

При зміні tenantTheme в ViewModel весь UI перемальовується автоматично. Завантаження шрифтів в runtime виконується через Downloadable Fonts API, шрифти кешуються після першого завантаження, що виключає затримки при старті. На практиці зміна теми займає менше 2 секунд, тоді як статичний реліз — 24 години.

Flutter та React Native

Flutter: ThemeData в MaterialApp параметризується аналогічно Compose. Для повного контролю використовуйте InheritedWidget або Riverpod-провайдер з об'єктом теми. Завантаження шрифтів в runtime через FontLoader API.

React Native: ThemeContext через React Context API, StyleSheet.create викликається з токенами з контексту. Гаряча перезавантаження теми без рестарту — через useContext(ThemeContext) в компонентах.

Чому важливий паттерн stale-while-revalidate для завантаження тем?

Stale-while-revalidate (описаний у документації MDN) — це стратегія кешування, яка гарантує актуальність даних без затримок. Показуємо кешовану тему одразу, оновлюємо у фоновому режимі. Це виключає очікування при старті та запобігає зламаному UI при помилках мережі.

class ThemeStore: ObservableObject { @Published var currentTheme: TenantTheme = .default func loadTheme(tenantId: String) async { do { if let cached = ThemeCache.load(tenantId: tenantId) { await MainActor.run { currentTheme = cached } } let dto = try await api.fetchTheme(tenantId: tenantId) let theme = TenantTheme(from: dto) ThemeCache.save(theme, tenantId: tenantId) await MainActor.run { currentTheme = theme } } catch { // Fallback на дефолтну тему, не крэшимся } } } 

Стандартна завантаження без паттерну приводила б до порожнього екрана на 200-300 мс. Порівняйте: статична тема вимагає 24 години релізу, динамічна перемикається за 2 секунди — різниця в 43 200 разів.

Як версіонування тем запобігає зламаному UI?

При оновленні контракту (додаванні нового токена) старі кешовані теми можуть не містити цього поля. Якщо версія теми нижча за мінімально підтримувану — використовуємо вбудовану дефолтну тему. Це захищає від відображення зламаного UI.

Процес роботи

1. Аудит UI: інвентаризація всіх кольорів, шрифтів, радіусів у додатку, виявлення хардкоду.
2. Проектування схеми токенів спільно з дизайнером: які параметри змінюються між брендами.
3. Реалізація ThemeProvider, Environment-based застосування, завантаження з API.
4. Рефакторинг компонентів: заміна хардкоду на токени, покриття візуальними тестами (Paparazzi для Android, SwiftUI Previews для iOS).
5. Тестування зміни теми в runtime: всі компоненти перемальовуються коректно, шрифти завантажуються без мерехтіння.

Що входить в роботу під ключ?

• Аудит UI та інвентаризація всіх візуальних параметрів
• Проектування схеми дизайн-токенів
• Реалізація ThemeProvider та завантажувача тем (з підтримкою кешування та stale-while-revalidate)
• Рефакторинг компонентів: заміна хардкоду на токени
• Налаштування системи версіонування тем
• Покриття візуальними тестами
• Документація по додаванню нових tenants та оновленню тем
• Навчання вашої команди (2 години онлайн)
• Підтримка протягом 1 місяця після впровадження

Чек-лист впровадження Theming Engine

• Аудит UI: інвентаризація всіх кольорів, шрифтів, радіусів
• Проектування схеми токенів з дизайнером
• Реалізація ThemeProvider та завантажувача тем
• Рефакторинг компонентів: заміна хардкоду на токени
• Налаштування кешування та обробка помилок
• Тестування зміни теми: всі компоненти перемальовуються коректно
• Документація по додаванню нових tenants

Готові впровадити Theming Engine у ваш white-label додаток? Пишіть нам для оцінки вашого проекту — ми проаналізуємо ваш UI і запропонуємо оптимальне рішення. Вартість впровадження під ключ: від $5000 для нового проекту, термін — 2-3 тижні.