Theming & White-Label

Runtime tenant theming across all platforms — you get a complete design token system with server-driven brand switching. No rebuild required to rebrand for a new tenant.

How It Works

Every platform follows the same three-step flow:

1. Static theme — default design tokens ship with the app (colors, typography, sizing)
2. Tenant bootstrap — at startup, fetch the tenant’s bootstrap.json from CDN
3. Runtime override — apply tenant-specific colors and branding over the defaults

The switch is transparent to product code. Components consume theme tokens through platform-native APIs — they never know whether they’re rendering the default brand or a tenant override.

Per-Platform Implementation

Flutter

Packages: ui (theme system), e11_tenant_bootstrap (tenant config)

The theme is a typed abstraction: E11Theme → E11ColorScheme (50+ semantic tokens) → E11TextTheme. Components consume it via context extensions:

Container(color: context.colors.backgroundColor)
Text('Hello', style: context.textTheme.bodyMedium)

E11Color auto-generates light/dark variants from a single hex value with darken(), lighten(), brightest, and softest helpers.

Tenant theming flow:

Server JSON → TenantBootstrapModel → BootstrapThemeModel → E11BootstrapColors → E11BoostrapTheme → RootThemeProvider.switchTheme()

The server provides 23 color fields. E11BootstrapColors maps each to a theme token, falling back to defaults for any missing values.

Angular

Packages: @engineering11/ui-lib (components + Tailwind preset), product theme package (static tokens), @engineering11/tenant-bootstrap-web (runtime overrides)

Three-layer architecture:

Layer 1 — Static tokens (product theme package): CSS custom properties on :root with RGB triplet values:

:root {
  --color-primary: var(--color-blue);    // 3, 60, 109
  --color-secondary: var(--color-pink);  // 216, 11, 139
  --color-app-bg: 247, 247, 247;
  --font-primary: 'Source Sans Pro', sans-serif;
}

Layer 2 — Tailwind mapping (ui-lib preset): Maps CSS variables to e11- utility classes:

e11-bg-skin-primary  →  var(--color-primary)
e11-text-skin-base   →  var(--color-text-base)

Layer 3 — Runtime override (tenant-bootstrap-web): At startup, fetches tenant config and injects CSS custom properties on document.documentElement, overriding the static defaults. All Tailwind utilities automatically reflect the new values.

The server provides 20 overridable color tokens plus brand assets (logos, favicon, company name).

React (Web)

Packages: @engineering11/theme-frontend-api, @engineering11/react-ui-components, @engineering11/tenant-bootstrap-frontend-api

Design tokens are CSS custom properties in oklch color space with :root and .dark variants:

--background, --foreground, --card, --primary, --secondary,
--muted, --accent, --destructive, --border, --input, --ring

Tailwind v4 maps these via @theme inline. Dark mode uses @custom-variant dark (&:is(.dark *)) for class-based toggle. ThemeProvider applies ThemeEditorState to the document element. Components use cn() (clsx + tailwind-merge) and CVA for variant-driven styling.

Tenant theming: InjectBootstrap reads tenant config and applies theme variables to the root element at runtime.

React Native

Package: @engineering11/rn-ui-components

The E11Theme system is a typed context with colors (E11ColorScheme), textTheme, buttonThemes, inputTheme, and more. Components call useE11Theme() and apply inline style objects — no NativeWind or StyleSheet for theming.

E11ThemeSet bundles light + dark themes as a named set. E11ThemeProvider holds theme sets and supports setMode (light/dark) and setActiveThemeSet (brand switching).

Tenant theming: InjectBootstrapRN maps the tenant theme to an E11ThemeSet and passes it to the provider.

What You Get vs. Customize

Next Steps

• Authentication — Auth patterns across platforms
• Error Handling — Error handling and monitoring
• Component Libraries — Full component catalogs