# Temi e styling

<PageBadges />

Importare il foglio di stile del pacchetto una volta nel punto di entrata dell'applicazione:

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

## Temi incorporati

`theme` accetta `standard`, `modal`, `simplified` o `spotlight`. `colorMode` accetta `light`,
`dark` o `system`.

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

Il nome del tema e la modalità colore selezionano la corrispondente classe di estratto di vaniglia incorporata.
non modifica automaticamente la proprietà `theme`, quindi un'applicazione può scegliere il proprio accoppiamento.

## Temi personalizzati

L'esportazione `form0-react/theme.css.js` espone il contratto a tema `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.
})
```

Passa la classe generata a `theme`:

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

Utilizzare `className` per lo styling a livello di forma e gli elementi ordinari del wrapper per l'applicazione circostante
layout. Il markup del campo personalizzato appartiene a [custom renderer](/it/bindings/react/custom-renderers).