Modules → Thèmes

Thèmes / White-label

Studio de thème par instance ou client : nom d'app, couleurs, rayon de bordure. Personnalisez avec un aperçu en direct, enregistrez, définissez par défaut, exportez en JSON — tout est testable dans le Simulateur.

Intégrations & technique

Ouvrir le simulateur

À propos

Le module Thèmes / White-label fait porter le branding par l'instance, pas par le code : chaque client (ou environnement) reçoit son thème — nom d'application, couleur d'accent, fond, surface, texte et rayon de bordure. Le studio permet de partir d'un thème existant, de le personnaliser en direct dans un aperçu scopé, puis de l'enregistrer, de le définir par défaut ou de l'exporter en JSON pour le déployer.

Ce que couvre le simulateur

  • Quatre thèmes seedés : Blueprint (défaut), ACME Corp, Nordis Énergie, Contraste élevé.
  • Aperçu live : barre d'app (logo + nom), cartes KPI, bouton primaire, champ, badge — entièrement stylés par le thème sélectionné, sans toucher aux variables globales.
  • Personnalisation : accent, fond, nom de l'app, rayon de bordure (0–16 px).
  • Actions réelles : enregistrer comme nouveau thème, définir par défaut, supprimer (avec confirmation), exporter en JSON (téléchargement).

Composants utilisés

bpm.metricRow, bpm.panel, bpm.colorPicker, bpm.slider, bpm.input, bpm.badge, bpm.confirmModal et bpm.toast.

import bpm

theme = bpm.theme.get("acme-corp")

bpm.input("Nom de l'app", value=theme.couleurApp, on_change=set_nom)
bpm.colorPicker("Couleur d'accent", value=theme.accent, on_change=set_accent)
bpm.colorPicker("Couleur de fond", value=theme.fond, on_change=set_fond)
bpm.slider("Rayon de bordure (px)", value=theme.rayon, min=0, max=16, on_change=set_rayon)

bpm.button("Enregistrer comme nouveau thème", on_click=enregistrer)
bpm.button("Définir par défaut", on_click=definir_defaut)

Paramétrage

Le simulateur fonctionne entièrement en local (thèmes seedés, aucune API requise). L'aperçu est scopé à son conteneur : il n'écrit jamais dans les variables CSS globales du document, qui restent pilotées par le ThemeProvider de l'application. Voir la documentation pour les variables exposées, le modèle JSON et la résolution multi-tenant.