# 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.

```yaml
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.

```yaml
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`.

:::callout
**Vérifiez les contrastes sur les deux palettes, pas sur une seule.** Une `primary` réglée sur un fond blanc est fréquemment trop sombre sur un fond quasi noir — c'est pourquoi l'exemple ci-dessus l'éclaircit au lieu de la réutiliser. Le couple est constitué de deux designs, pas d'un design dont on aurait éteint la lumière.
:::

## `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`](/fr/docs/interactive-components) à votre en-tête et il écrira la préférence enregistrée qui prime sur `colorScheme`.

```yaml
- 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](/fr/docs/theme) — le bloc `colors` dont `darkColors` est le calque.
- [Typographie](/fr/docs/theme-typography) — les rôles typographiques, indépendants du schéma.
- [Espacements, rayons et ombres](/fr/docs/theme-spacing) — les autres catégories de jetons.
- [Composants interactifs](/fr/docs/interactive-components) — le composant `theme-toggle`.