# Rendus, thèmes et style

<PageBadges />

Le starter conserve les contrats de rendu des paquets séparés de la présentation de l'application.
`form0-react/index.css` une fois, puis superposez les choix spécifiques à l'application sur le dessus.

## Champ renderers

L'application renderer remplace live dans `src/field-renderers`. Pour en ajouter un:

1. Créez le composant React.
2. Ajoutez-le à `src/field-renderers/resolver.js` sous un identifiant stable.
3. Assignez le type de champ form0 à cet identifiant dans `form0.config.js`.

```js
fieldRenderers: {
  DateField: "date-field-shadcn",
}
```

La date incluse renderer montre la composition des props de champ form0 avec les primitives shadcn/ui.
Examinez le [contrat personnalisé renderer](/fr/bindings/react/custom-renderers) avant de créer des
overrides.

## Thèmes

Définissez `theme.mode` sur `light`, `dark`, ou `system`. Pour remplacer le thème du paquet, créez un
Extrayez le thème sous `src/themes` et définissez `theme.customTheme` sur son chemin d'importation.

Le thème personnalisé doit mettre en œuvre le contrat complet du thème `form0-react`.
`src/themes/custom-example.css.js` comme point de départ et voir
[Thèmes et style](/fr/bindings/react/themes-styling) pour le contrat.

## Application CSS

Utilisez ces couches pour différentes responsabilités:

- `src/index.css` pour Tailwind, les jetons shadcn et les styles d'application globaux;
- `src/App.css` pour la mise en page d'application;
- `src/styles/form0-overrides.css` pour les classes de formulaires appartenant à l'application; et
- Thèmes pour le paquet renderer.

Préférez les contrats d'enregistrement et de thème renderer à l'édition de code dans les paquets form0 installés.