Baseline et mode sombre

Trois propriétés de thème décident de l'apparence de votre application avant que vous ne styliez quoi que ce soit, et de son apparence la nuit : baseline, darkColors et colorScheme.

baseline

baseline détermine si les composants préconstruits de Sovrium arrivent avec une apparence attachée.

Valeur	Comportement
extend	(défaut) Les composants héritent des jetons du système de design par défaut de Sovrium — les cartes ont une bordure et une ombre, les boutons un fond, les contrôles de formulaire un anneau de focus. Vos jetons se superposent.
replace	Les composants abandonnent l'apparence par défaut et partent d'une base neutre, non stylée. Rien n'est préstylé ; chaque surface est à définir.

Commencez par extend : cela met une application utilisable à l'écran avec une poignée de jetons de couleur, et tout préstyle individuel reste surchargeable — un props.className fourni par l'auteur est ajouté en dernier et l'emporte donc dans la cascade Tailwind. Ne recourez à replace que si vous bâtissez votre propre système de design et que les valeurs par défaut vous gênent activement.

theme:
  baseline: extend

darkColors

darkColors est calqué sur la structure de colors et fournit les valeurs utilisées en mode sombre. Un même thème livre donc les deux palettes, et aucun composant n'a besoin d'une variante dark: écrite à la main.

theme:
  colors:
    background: '#ffffff'
    surface: '#f8fafc'
    text: '#0f172a'
    muted: '#64748b'
    primary: '#4f46e5'
  darkColors:
    background: '#0f172a'
    surface: '#1e293b'
    text: '#f8fafc'
    muted: '#94a3b8'
    primary: '#818cf8'

Seuls les jetons qui doivent changer ont besoin de figurer dans darkColors. Un jeton omis conserve sa valeur claire dans les deux schémas — ce qui est correct pour une couleur d'accent de marque, et généralement faux pour tout ce dont le nom contient background ou text.

colorScheme

colorScheme fixe la palette servie à un nouveau visiteur, avant que la moindre préférence de sa part ne soit connue.

Valeur	Le nouveau visiteur voit
light	La palette claire, quel que soit le réglage de son système d'exploitation.
dark	La palette sombre, quel que soit ce réglage.
system	Celle que son système d'exploitation indique.

Un visiteur ayant depuis fait un choix l'emporte toujours : la préférence enregistrée prime à chaque visite ultérieure. colorScheme est la valeur par défaut, pas la règle.

Elle est appliquée avant le rendu du contenu de la page, si bien qu'une application sombre par défaut n'affiche pas un éclair blanc au chargement.

La bascule

Le contrôle offert au visiteur est un composant, pas une propriété de thème : ajoutez un theme-toggle à votre en-tête et il écrira la préférence enregistrée qui prime sur colorScheme.

- type: container
  element: header
  props: { className: 'flex items-center justify-between p-4' }
  children:
    - { type: text, tag: strong, content: 'Acme' }
    - { type: theme-toggle }

Sans bascule, l'application suit simplement colorScheme pour toujours — un choix légitime pour un design à palette unique.

Pages connexes

• Aperçu du thème et couleurs — le bloc colors dont darkColors est le calque.
• Typographie — les rôles typographiques, indépendants du schéma.
• Espacements, rayons et ombres — les autres catégories de jetons.
• Composants interactifs — le composant theme-toggle.