# Theming

> Match the chat to your design system with CSS variables and light or dark themes.

Source: https://sideagent.dev/docs/theming

The chat is neutral by default: grayscale, your font, a 10px radius.

`theme="auto"` follows the OS and a host `.dark`, `data-theme="dark"` or `data-bs-theme="dark"`. Pass `"light"` or `"dark"` to force one.

Match your design system with CSS variables:

```css
:root {
  --sideagent-accent: var(--primary);
  --sideagent-accent-fg: var(--primary-foreground);
  --sideagent-bg: var(--background);
  --sideagent-fg: var(--foreground);
  --sideagent-border: var(--border);
  --sideagent-surface: var(--muted);
  --sideagent-muted: var(--muted-foreground);
  --sideagent-radius: 10px;
  --sideagent-font: inherit;
}
```