# Theme

Define the colors and typography used across your Foldspace agent interface.

The `theme` group controls the colors and typography used across the agent interface. Pass it as a nested object inside `setConfiguration`, as described in the [SDK configuration](/customize/configuration/) reference.

<ThemeMap />

## Options

| Key | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `primaryColor` | `string` | `"#0054B6"` | The main accent color used for key interactive and highlight elements across the UI. |
| `primaryFontColor` | `string` | `"#121926"` | The main text color applied to primary content and key interface elements. |
| `backgroundColor` | `string` | `"#FFFFFF"` | The primary background color for chat containers and other main interface components. |
| `fontFamily` | `string` | `"Poppins"` | The typeface used throughout the interface. |
| `fontSize` | `number` | `14` | The default font size for text across the interface. |
| `borderColor` | `string` | `""` | The color used for borders around static UI elements, such as containers or input fields. |
| `secondaryFontColor` | `string` | `"#121926"` | The text color for secondary content, such as hints, timestamps, or less prominent labels. |
| `secondaryColor` | `string` | `"#0054B6"` | The secondary accent color, used to complement the primary color and create visual hierarchy. |

<ThemeBeforeAfter />

## Example

```javascript
foldspace.agent('YOUR-AGENT-KEY').setConfiguration({
  theme: {
    primaryColor: "#0066FF",
    primaryFontColor: "#0B1220",
    backgroundColor: "#FFFFFF",
    fontFamily: "Roboto",
    fontSize: 14,
    secondaryFontColor: "#6B7280",
    secondaryColor: "#F3F4F6",
    borderColor: "#E6E9EE"
  }
});
```