Theming

Forms rendered with @osforms/react use a theme system built on top of FormTheme. You can customize colors, font, font size, and border radius. Set a theme with the theme prop on OSForm, or store it in the form’s schema (formSchema.theme) through PATCH /api/v1/forms/{id}. The dashboard builder doesn’t have a theme editor yet.

Default Theme

The default theme is dark, matching the OSForms dashboard:

{
  colors: {
    background: '#0a0a0a',
    surface:    '#212121',
    primary:    '#fafafa',
    text:       '#fafafa',
    textSecondary: '#a8a8a8',
    border:     '#333333',
    error:      '#ef4444',
  },
  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
  fontSize:     'md',
  borderRadius: 'md',
  buttonVariant: 'solid',
}

FormTheme Reference

colors

Property	Default	Description
`background`	`#0a0a0a`	Main background color
`surface`	`#212121`	Card / input surface color
`primary`	`#fafafa`	Primary button fill and active accents
`text`	`#fafafa`	Primary text and labels
`textSecondary`	`#a8a8a8`	Descriptions and helper text
`border`	`#333333`	Input and card borders
`error`	`#ef4444`	Validation error messages

fontFamily

Default: Inter, -apple-system, ...system-ui, sans-serif Pass any valid CSS font-family string. The font itself is not loaded automatically — ensure it’s available in your app.

theme={{ fontFamily: '"DM Sans", sans-serif' }}

Value	Resolved	Description
`sm`	`14px`	Compact
`md`	`16px`	Default
`lg`	`18px`	Large / accessible

borderRadius

Value	Resolved	Description
`none`	`0px`	Sharp corners
`sm`	`4px`	Slightly rounded
`md`	`8px`	Default
`lg`	`12px`	Rounded
`full`	`9999px`	Pill-shaped

fontSize and borderRadius mostly affect classic mode. Conversational mode uses its own fixed sizes.

buttonVariant

Accepted (solid, outline, ghost) but not applied yet. Buttons always render solid.

Applying Themes

Via `OSForm` prop

Each top-level key you pass replaces the schema’s value for that key. colors is replaced as a whole object, and colors you omit fall back to the defaults above, so pass all of them:

<OSForm
  formId="abc123"
  theme={{
    colors: {
      background: '#ffffff',
      surface: '#f5f5f5',
      primary: '#6366f1',
      text: '#111827',
      textSecondary: '#6b7280',
      border: '#e5e7eb',
      error: '#ef4444',
    },
    fontFamily: '"Inter", sans-serif',
    fontSize: 'md',
    borderRadius: 'lg',
  }}
/>

Via FormSchema

Themes can also be stored in the form schema. The OSForm theme prop overrides it key by key, as described above:

{
  "mode": "conversational",
  "fields": [...],
  "theme": {
    "colors": {
      "primary": "#6366f1"
    },
    "borderRadius": "lg"
  }
}

Common Presets

Light

const lightTheme: FormTheme = {
  colors: {
    background: '#ffffff',
    surface: '#f9fafb',
    primary: '#111827',
    text: '#111827',
    textSecondary: '#6b7280',
    border: '#e5e7eb',
    error: '#ef4444',
  },
  borderRadius: 'md',
};

Brand (purple)

const brandTheme: FormTheme = {
  colors: {
    background: '#1e1b4b',
    surface: '#312e81',
    primary: '#818cf8',
    text: '#f5f3ff',
    textSecondary: '#a5b4fc',
    border: '#4338ca',
    error: '#f87171',
  },
  borderRadius: 'lg',
};

Minimal

const minimalTheme: FormTheme = {
  colors: {
    background: '#ffffff',
    surface: '#ffffff',
    primary: '#000000',
    text: '#000000',
    textSecondary: '#737373',
    border: '#e5e5e5',
    error: '#ef4444',
  },
  borderRadius: 'none',
};

Getting Started

Core Concepts

Integrations

Default Theme

FormTheme Reference

colors

fontFamily

fontSize

borderRadius

buttonVariant

Applying Themes

Via `OSForm` prop

Via FormSchema

Common Presets

Light

Brand (purple)

Minimal

​Default Theme

​FormTheme Reference

​colors

​fontFamily

​fontSize

​borderRadius

​buttonVariant

​Applying Themes

​Via OSForm prop

​Via FormSchema

​Common Presets

​Light

​Brand (purple)

​Minimal

Default Theme

FormTheme Reference

colors

fontFamily

fontSize

borderRadius

buttonVariant

Applying Themes

Via `OSForm` prop

Via FormSchema

Common Presets

Light

Brand (purple)

Minimal