Skip to main content
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

PropertyDefaultDescription
background#0a0a0aMain background color
surface#212121Card / input surface color
primary#fafafaPrimary button fill and active accents
text#fafafaPrimary text color
textSecondary#a8a8a8Helper text, labels, placeholders
border#333333Input and card borders
error#ef4444Validation 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' }}

​
fontSize

ValueResolvedDescription
sm14pxCompact
md16pxDefault
lg18pxLarge / accessible

​
borderRadius

ValueResolvedDescription
none0pxSharp corners
sm4pxSlightly rounded
md8pxDefault
lg12pxRounded
full9999pxPill-shaped

​
buttonVariant

ValueDescription
solidFilled button (default)
outlineTransparent with border
ghostNo 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',
};