Créer votre thème

Choisissez une couleur de marque, une voix typographique et une silhouette : l'aperçu ci-contre se met à jour en direct, en clair comme en sombre, et le fichier theme-mon-theme.css généré respecte la charte du design system (primitives préfixées en section 0, tokens sémantiques en var() uniquement, canal color-mix pour les translucides). Toute famille laissée sur « héritée » retombe proprement sur le thème « Moderne ».

Identité
Fichier : theme-ocean.css · attribut : data-theme-style="ocean"
⚠ Ce nom est déjà pris par un thème existant — choisissez-en un autre pour éviter que les deux feuilles se marchent dessus.
Couleurs
Rampe de marque générée (50 → 900)
Rampe de neutres générée (50 → 975)
Typographie

Portez ce vieux whisky au juge blond qui fume

Portez ce vieux whisky au juge blond qui fume

Enregistrer · Annuler · Paramètres

const theme = createTheme();

Silhouette & rythme
Actions

Exporter

Voir le CSS généré

Brancher le thème dans le catalogue

  1. Enregistrer le fichier dans styles/themes/theme-ocean.css.
  2. Dans index.html, ajouter après les autres thèmes :
    <link rel="stylesheet" href="styles/themes/theme-ocean.css">
  3. Ajouter l'option au sélecteur de thème (#themeStyleSelect) :
    <option value="ocean">Océan</option>
  4. Valider avec npm run lint — le fichier généré respecte le garde-fou (aucune couleur littérale hors de la section 0, translucides via color-mix).