# Thèmes et style

<PageBadges />

Importer la feuille de style du paquet une fois dans le point d'entrée de l'application:

```js
import "form0-react/index.css"
```

## Thèmes intégrés

`theme` accepte `standard`, `modal`, `simplified` ou `spotlight`. `colorMode` accepte `light`,
`dark` ou `system`.

```jsx
<FormRenderer schema={schema} theme="standard" colorMode="system" />
```

Le nom du thème et le mode couleur sélectionnent la classe Vanilla Extract intégrée correspondante.
ne modifie pas automatiquement la propriété `theme`, donc une application peut choisir son propre appariement.

## Thèmes personnalisés

L'exportation `form0-react/theme.css.js` expose le contrat de thème `vars`:

```js
import { createTheme } from "@vanilla-extract/css"
import { vars } from "form0-react/theme.css.js"

export const appTheme = createTheme(vars, {
  // Provide every color, type, spacing, and radius token in the contract.
})
```

Passez la classe générée à `theme`:

```jsx
<FormRenderer schema={schema} theme={appTheme} colorMode="light" />
```

Utilisez `className` pour le style au niveau de la forme et les éléments d'emballage ordinaires pour l'application environnante
Le balisage de champ personnalisé appartient à un [custom renderer](/fr/bindings/react/custom-renderers).