Variables exposées

Un thème expose un petit jeu de variables, volontairement réduit pour rester maintenable. Tout le reste (états hover, ombres, contrastes) est dérivé de ces valeurs.

couleurApp — nom d'application affiché dans la barre (les initiales servent de logo de repli).
accent — couleur primaire (boutons, badges, liens) ; la couleur du texte posé dessus est dérivée par luminance.
fond — arrière-plan général de l'interface.
surface — fond des cartes, panneaux et champs.
texte — couleur de texte principale ; les bordures sont dérivées (texte à ~15 % d'opacité).
rayon — rayon de bordure en px (0–16), appliqué uniformément.

Modèle JSON d'un thème

C'est exactement le format produit par « Exporter JSON » dans le simulateur, et celui attendu côté serveur pour provisionner une instance.

{
  "id": "theme-acme",
  "nom": "ACME Corp",
  "couleurApp": "ACME Portail",
  "accent": "#e11d48",
  "fond": "#faf6f6",
  "surface": "#ffffff",
  "texte": "#1c1917",
  "rayon": 4
}

Application au DOM

En production, le thème résolu est appliqué une seule fois, en injectant les variables CSS sur un conteneur racine — jamais champ par champ dans les composants. Dans le simulateur, l'aperçu est scopé : les valeurs sont posées en style inline sur le conteneur de prévisualisation, sans jamais muter les variables globales du document (elles restent la propriété du ThemeProvider de l'application).

// Application scopée (aperçu ou app embarquée) — pas de document.documentElement
function appliquerTheme(racine: HTMLElement, theme: Theme) {
  racine.style.setProperty("--bpm-accent", theme.accent);
  racine.style.setProperty("--bpm-bg", theme.fond);
  racine.style.setProperty("--bpm-surface", theme.surface);
  racine.style.setProperty("--bpm-text", theme.texte);
  racine.style.setProperty("--bpm-radius", theme.rayon + "px");
}

Multi-tenant

La résolution du thème suit l'ordre : thème explicitement assigné à l'instance → thème du client (tenant) → thème par défaut de la plateforme. Recommandations :

Persister les thèmes dans une table themes et référencer theme_id sur chaque tenant ; ne jamais dupliquer les valeurs.
Résoudre le tenant côté serveur (sous-domaine ou en-tête d'instance) et servir les variables dès le premier rendu pour éviter tout flash de thème.
Conserver un thème par défaut non supprimable : c'est le repli de toute instance dont le thème a été retiré (comportement reproduit dans le simulateur).
Tracer les déploiements de branding via le champ exporteLe ajouté à chaque export JSON.

Ouvrir le simulateur

Documentation — Thèmes / White-label

Variables exposées

Modèle JSON d'un thème

Application au DOM

Multi-tenant