Chat UI

Theming

View as Markdown

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

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:

: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;
}