Theming

Every visual is a --fs-* CSS variable applied to the form root. You have three ways to set them, from easiest to most granular.

The theme prop

Pass a preset name or a token object:

<FormSwitch theme="light" schema={...} onSubmit={...} />   // or "dark"

The light and dark presets are also exported if you want to read or extend them:

import { light, dark, themes } from 'reactformswitch'

A token object with defineTheme

defineTheme merges token objects (identity helper — the last value wins), handy for tweaking a preset:

import { FormSwitch, defineTheme, light } from 'reactformswitch'

const brand = defineTheme(light, {
  '--fs-color-primary': '#7c3aed',
  '--fs-radius': '10px',
})

<FormSwitch theme={brand} schema={...} onSubmit={...} />

Raw CSS variables

Or override the variables in your own CSS — they cascade to the form root:

.my-form { --fs-color-primary: #e11d48; --fs-radius: 12px; }

The available variables: