# Renderistas, temas y estilo

<PageBadges />

El starter mantiene los contratos de representación de paquetes separados de la presentación de la aplicación.
`form0-react/index.css` una vez, luego capas de opciones específicas de la aplicación en la parte superior.

## Campo renderers

Aplicación renderer anula vivir en `src/field-renderers`. Para agregar uno:

1. Cree el componente React.
2. Añádelo a `src/field-renderers/resolver.js` bajo un identificador estable.
3. Asigna el tipo de campo form0 a ese identificador en `form0.config.js`.

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

La fecha incluida renderer demuestra la composición de los accesorios de campo form0 con primitivas shadcn/ui.
Revise el contrato [personalizado renderer](/es/bindings/react/custom-renderers) antes de crear un contrato adicional
Anulaciones.

## Temas

Establezca `theme.mode` en `light`, `dark` o `system`. Para reemplazar el tema del paquete, cree una vainilla
Extraiga el tema bajo `src/themes` y establezca `theme.customTheme` en su ruta de importación.

El tema personalizado debe implementar el contrato completo del tema `form0-react`. Uso
`src/themes/custom-example.css.js` como punto de partida y ver
[Temas y estilo](/es/bindings/react/themes-styling) para el contrato.

## CSS de aplicación

Utilice estas capas para diferentes responsabilidades:

- `src/index.css` para Tailwind, tokens shadcn y estilos de aplicaciones globales;
- `src/App.css` para el diseño de aplicaciones;
- `src/styles/form0-overrides.css` para las clases de formularios propiedad de la aplicación; y
- Temas de Vanilla Extract para los tokens renderer del paquete.

Prefiere los contratos de registro y temas de renderer sobre el código de edición dentro de los paquetes form0 instalados.