# Temas y estilismo

<PageBadges />

Importe la hoja de estilos del paquete una vez en el punto de entrada de la aplicación:

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

## Temas incorporados

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

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

El nombre del tema y el modo de color seleccionan la clase Vanilla Extract incorporada correspondiente.
no cambia automáticamente la propiedad `theme`, por lo que una aplicación puede elegir su propio emparejamiento.

## Temas personalizados

La exportación `form0-react/theme.css.js` expone el contrato del 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.
})
```

Pasar la clase generada a `theme`:

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

Utilice `className` para el estilo de nivel de forma y elementos de envoltura ordinarios para la aplicación circundante
El marcado de campo personalizado pertenece a un [custom renderer](/es/bindings/react/custom-renderers).