Themes and styling

Import the package stylesheet once in the application entry point:

Code
import "form0-react/index.css"

Built-in themes

theme accepts standard, modal, simplified, or spotlight. colorMode accepts light, dark, or system.

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

The theme name and color mode select the corresponding built-in Vanilla Extract class. Placement does not automatically change the theme property, so an application can choose its own pairing.

Custom themes

The form0-react/theme.css.js export exposes the vars theme contract:

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.
})

Pass the generated class to theme:

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

Use className for form-level styling and ordinary wrapper elements for surrounding application layout. Custom field markup belongs in a custom renderer.