Theming

Forms rendered with @osforms/react use a theme system built on top of FormTheme. You can customize colors, typography, border radius, and button style.

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 color
`textSecondary`	`#a8a8a8`	Helper text, labels, placeholders
`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

buttonVariant

Value	Description
`solid`	Filled button (default)
`outline`	Transparent with border
`ghost`	No border or fill

Applying Themes

Via `OSForm` prop

Pass a partial theme — only the properties you specify are overridden:

<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',
    buttonVariant: 'solid',
  }}
/>

Via FormSchema

Themes can also be embedded in the form schema itself. The OSForm theme prop overrides the schema theme:

{
  "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',
  buttonVariant: 'solid',
};

Brand (purple)

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

Minimal

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

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