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

Реалізація 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 тижні.