> ## Documentation Index
> 
> Fetch the complete documentation index at: [/docs/llms.txt](/docs/llms.txt)
> 
> Use this file to discover all available pages before exploring further.

[Skip to main content](#content-area)

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)

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)

FormTheme Reference

### 

[​

](#colors)

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)

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)

fontSize

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

### 

[​

](#borderradius)

borderRadius

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

### 

[​

](#buttonvariant)

buttonVariant

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

* * *

## 

[​

](#applying-themes)

Applying Themes

### 

[​

](#via-osform-prop)

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)

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)

Common Presets

### 

[​

](#light)

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)

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)

Minimal

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

[Conditional Logic](/docs/core/conditional-logic)[Resend](/docs/integrations/resend)

⌘I