> ## Documentation Index
> Fetch the complete documentation index at: https://docs.voltai.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

> Customize the widget's appearance to match your brand

Make the widget feel like a natural part of your website by customizing its colors and appearance.

## Widget title

Set the `title` option to change the text displayed in the widget header:

```javascript theme={null}
const voltai = Voltai.load({
  apiKey: 'your-api-key',
  title: 'Acme Support'
});
```

## Custom colors

Pass a `colors` object to override the default theme. You only need to specify the colors you want to change. Colors should be provided as hex values (e.g., `#2563EB`).

```javascript theme={null}
const voltai = Voltai.load({
  apiKey: 'your-api-key',
  colors: {
    primary: '#FFC222',
    primaryForeground: '#181D27',
    ring: '#FFC222'
  }
});
```

## Available color options

### Background colors

| Property     | Description                                 |
| ------------ | ------------------------------------------- |
| `background` | Main page/widget background                 |
| `surface`    | Elevated surfaces (cards, modals)           |
| `muted`      | Subtle backgrounds (hover states, disabled) |

### Card colors

| Property         | Description                    |
| ---------------- | ------------------------------ |
| `card`           | Card background color          |
| `cardForeground` | Text color on card backgrounds |

### Popover colors

| Property            | Description                       |
| ------------------- | --------------------------------- |
| `popover`           | Popover background color          |
| `popoverForeground` | Text color on popover backgrounds |

### Text colors

| Property          | Description          |
| ----------------- | -------------------- |
| `foreground`      | Primary text color   |
| `mutedForeground` | Secondary/muted text |

### Primary colors

| Property                | Description                                     |
| ----------------------- | ----------------------------------------------- |
| `primary`               | Brand/accent color (buttons, links, highlights) |
| `primarySoft`           | Light variant of primary for soft backgrounds   |
| `primarySoftForeground` | Text color on primary soft backgrounds          |
| `primaryForeground`     | Text color on primary backgrounds               |
| `primaryStrong`         | Dark variant of primary                         |

### Secondary colors

| Property                  | Description                              |
| ------------------------- | ---------------------------------------- |
| `secondary`               | Secondary/neutral accent color           |
| `secondaryForeground`     | Text color on secondary backgrounds      |
| `secondarySoft`           | Light variant of secondary               |
| `secondarySoftForeground` | Text color on secondary soft backgrounds |
| `secondaryStrong`         | Dark variant of secondary                |

### Accent colors

| Property           | Description                      |
| ------------------ | -------------------------------- |
| `accent`           | Accent background color          |
| `accentForeground` | Text color on accent backgrounds |

### Border & Input

| Property        | Description              |
| --------------- | ------------------------ |
| `border`        | Border color             |
| `borderPrimary` | Brand-colored border     |
| `input`         | Input field border color |
| `ring`          | Focus ring color         |

### Status colors

| Property                | Description                      |
| ----------------------- | -------------------------------- |
| `error`                 | Error/destructive color          |
| `errorSoft`             | Light error background           |
| `errorSoftForeground`   | Text on error soft backgrounds   |
| `errorForeground`       | Text on error backgrounds        |
| `errorStrong`           | Dark variant of error            |
| `success`               | Success color                    |
| `successSoft`           | Light success background         |
| `successSoftForeground` | Text on success soft backgrounds |
| `successForeground`     | Text on success backgrounds      |
| `successStrong`         | Dark variant of success          |
| `warning`               | Warning color                    |
| `warningSoft`           | Light warning background         |
| `warningSoftForeground` | Text on warning soft backgrounds |
| `warningForeground`     | Text on warning backgrounds      |
| `warningStrong`         | Dark variant of warning          |

### Other

| Property | Description                                        |
| -------- | -------------------------------------------------- |
| `radius` | Border radius for rounded corners (e.g., "0.5rem") |

## Example: Dark theme

```javascript theme={null}
const voltai = Voltai.load({
  apiKey: 'your-api-key',
  colors: {
    foreground: '#ffffff',
    mutedForeground: '#a1a1aa',
    background: '#18181b',
    surface: '#27272a',
    muted: '#3f3f46',
    border: '#3f3f46'
  }
});
```

## Example: Brand colors

```javascript theme={null}
const voltai = Voltai.load({
  apiKey: 'your-api-key',
  title: 'Your Company AI',
  colors: {
    primary: '#FFC222',
    primaryForeground: '#181D27',
    ring: '#FFC222'
  }
});
```

<Tip>
  Start by customizing just `primary` to match your brand's primary color. Add more overrides as needed.
</Tip>