# Match your site's theme and style the widget

> Follow your site's dark mode, and restyle the widget with CSS variables and part names.

The deployment's **Theme** sets the widget's look for everyone. On your own site you can go further: follow your site's light and dark mode, and restyle the widget with CSS.

## Follow your site's light and dark mode

If your site has its own theme switch, set the widget's theme to `host`. It then matches your page, and changes the moment a visitor flips your switch. `host` isn't one of the deployment's **Theme** choices (**Match system**, **Light**, **Dark** and **Custom**), so you set it in your install code:

| How you installed | Add |
| --- | --- |
| **Quick install** script tag | `data-theme="host"` |
| `<web-ai-chat>` element | `theme="host"` |
| NPM package or React | `theme: 'host'` |

Your deployment's brand colours stay as they are. In code you can set the mode and a colour together: `theme: { mode: 'host', accent: '#0f766e' }`.

The widget reads your page's mode in this order:

1. A `dark` or `light` class, or a `data-theme`, `data-color-scheme`, `data-mode` or `data-bs-theme` attribute set to `dark` or `light`, on `<html>`.
2. The same on `<body>`.
3. The page's `color-scheme`, when it's only `dark` or only `light`.
4. The visitor's device setting.

A visitor who picks **Light or dark** in the chat's ⋯ menu keeps their own choice, and it's remembered. To let your site's switch decide alone, turn off **Light or dark** under **Header buttons** in the deployment's **Chat widget** tab.

## Change colours and sizes with CSS variables

The widget has its own styles, so your site's CSS can't break it by accident. To change it on purpose, set its CSS variables on the widget's element: `helpai-chat-host` for the script tag, the NPM package and React, or `web-ai-chat` for the element.

```css
helpai-chat-host,
web-ai-chat {
  --helpai-accent-user: #0f766e;
  --helpai-font: 'Inter', system-ui, sans-serif;
  --helpai-radius: 14px;
  --helpai-panel-w: 420px;
  --helpai-panel-h: 640px;
  --helpai-fab-size: 60px;
}
```

Values set in the deployment's **Theme** (with **Custom**: colours, corners and font) or **Size and position** (**Width**, **Height**, **Expanded width** and **Expanded height**) are applied on the element itself and win over your stylesheet. Leave those fields blank, or add `!important` to your variable.

| Variable | Changes |
| --- | --- |
| `--helpai-accent-user` | The accent: the bubble, send button and links. The widget works out readable shades of it for light and dark |
| `--helpai-accent-text-user` | Text and icons on the accent, in older browsers. Current browsers pick black or white for contrast |
| `--helpai-font` | The font |
| `--helpai-radius` | How rounded the corners are |
| `--helpai-panel-w`, `--helpai-panel-h` | The width and height the floating chat opens at. Default 380 × 600 px |
| `--helpai-expanded-w`, `--helpai-expanded-h` | The size of the larger, expanded chat |
| `--helpai-fab-size` | The size of the chat bubble. Default 56 px |

## Restyle parts with ::part()

Five parts of the widget have names that stay the same across releases, so you can style what variables don't cover, such as shadows and borders.

| Part | What it is |
| --- | --- |
| `launcher` | The chat bubble |
| `panel` | The open chat |
| `header` | The bar at the top of the chat |
| `messages` | The list of messages |
| `composer` | The message box |

```css
helpai-chat-host::part(launcher),
web-ai-chat::part(launcher) {
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

helpai-chat-host::part(panel),
web-ai-chat::part(panel) {
  border-radius: 20px;
}
```

A widget set to **Embed in an iframe** keeps its styles inside the iframe; style it with the deployment's **Theme**.

<Tip>
Change one thing at a time and check it in light and dark. Text needs to stay readable on your accent colour.
</Tip>

Related: [Customize how the widget looks and behaves](https://support.help.ai/deployments-and-the-widget/customize-the-widget).