Temas y estilismo

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

Code
import "form0-react/index.css"

Temas incorporados

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

Code
<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:

Code
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:

Code
<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.