Aperçu du thème et couleurs

theme définit votre système de design sous forme de jetons nommés. Chaque jeton devient une propriété CSS personnalisée et une classe utilitaire Tailwind : les décisions de design déclarées en configuration sont donc disponibles pour chaque className de l'application. Toutes les catégories sont optionnelles — un thème utilisable peut se limiter aux couleurs.

theme vit désormais à l'intérieur de design. design.theme est l'emplacement canonique de ces jetons, et il accepte exactement ce que décrit cette page — toutes les catégories, sans changement. La clé theme de premier niveau reste un alias pris en charge : les configurations existantes continuent de fonctionner, sovrium validate affiche un avis de dépréciation et se termine tout de même avec le code 0. Déclarer à la fois theme et design.theme est une erreur, pas une fusion. Voir Système de design, qui couvre aussi les principes, la voix, le ton et les règles d'usage qui accompagnent les jetons.

Propriétés du thème

Propriété	Description
`colors`	Jetons de couleur nommés. Voir ci-dessous.
`darkColors`	Surcharges pour le mode sombre, calquées sur `colors`. Voir Baseline et mode sombre.
`colorScheme`	Le schéma servi à un nouveau visiteur : `light`, `dark` ou `system`.
`baseline`	`extend` (défaut) conserve l'apparence par défaut des composants Sovrium ; `replace` part d'une base neutre.
`fonts`	Typographie par rôle. Voir Typographie.
`spacing`	Jetons d'espacement nommés. Voir Espacements, rayons et ombres.
`borderRadius`	Jetons de rayon nommés, chacun devenant un utilitaire `rounded-{name}`.
`shadows`	Jetons d'ombre nommés, chacun devenant un utilitaire `shadow-{name}`.
`codeBlock`	Thème de coloration syntaxique des blocs de code markdown.
`breakpoints`	Points de rupture responsives. Voir Design responsive.
`animations`	Jetons d'images clés et de mouvement. Voir Animations.

`colors`

Des jetons de couleur nommés sous forme de paires clé-valeur. Chaque name génère une variable CSS --color-{name} ainsi que les utilitaires bg-{name}, text-{name} et border-{name}.

app.yaml

theme:
  colors:
    primary: '#3b82f6'
    secondary: '#8b5cf6'
    accent: '#f59e0b'
    background: '#ffffff'
    text: '#0f172a'
    muted: '#64748b'
    muted-foreground: '#94a3b8'

Deux contraintes sont appliquées au décodage de la configuration, de sorte qu'une palette malformée échoue à sovrium validate au lieu d'expédier une feuille de style cassée :

Règle	Accepté
Nom du jeton	Kebab-case en minuscules — `primary`, `muted-foreground`, `brand-2`. Ni camelCase, ni tirets bas.
Valeur	Hexadécimal à 6 ou 8 chiffres, ou une fonction `rgb(`, `rgba(`, `hsl(` ou `hsla(`.

Les jetons nommés ne forment pas une liste figée : définissez le vocabulaire dont votre design a besoin. Les composants préconstruits de Sovrium recherchent les rôles conventionnels — primary, background, text, muted — si bien que les fournir restyle gratuitement l'habillage intégré.

`fonts`

La typographie a été déplacée vers Typographie.

`spacing`

Les jetons d'espacement ont été déplacés vers Espacements, rayons et ombres.

`baseline` et mode sombre

baseline, colorScheme et darkColors ont été déplacés vers Baseline et mode sombre.

Ombres, rayon de bordure et blocs de code

Ces catégories ont été déplacées vers Espacements, rayons et ombres.

Points de rupture responsives et animations

breakpoints est documenté sur Design responsive ; animations sur Animations.

Exemple complet

app.yaml

theme:
  baseline: extend
  colorScheme: system
  colors:
    primary: '#6366f1'
    background: '#ffffff'
    foreground: '#0f172a'
  darkColors:
    background: '#0f172a'
    foreground: '#f8fafc'
  fonts:
    body: { family: Inter, weights: [400, 600] }
  spacing:
    container: 'max-w-6xl mx-auto px-4'
  borderRadius:
    card: '0.75rem'

Une application CRM rendue avec des couleurs, polices et espacements personnalisés.

Pages connexes

Typographie — le bloc fonts.
Espacements, rayons et ombres — les autres catégories de jetons.
Baseline et mode sombre — baseline, colorScheme, darkColors.
Design responsive — breakpoints.
Animations — les jetons de mouvement.

Dernière mise à jour 28 août 2026

← PrécédentÉchelle typographique Suivant →Typographie

Modifier cette page Signaler un problème

Cette documentation a été rédigée avec de l'IA : des erreurs ou du contenu obsolète sont donc possibles. Sovrium est en bêta. Les contributions et corrections sont les bienvenues.