Design and Theme - Sidenet API

Light/Dark Mode

initSidenet({
  copilotId: 'copilot-456',
  auth: { ...tokens },
  theme: 'dark', // or 'light'
});

// Update at runtime
updateSidenetConfig({ theme: 'light' });

Design Tokens

Each token accepts a ThemeTokenInput — either a plain string (applies to both light and dark) or a { light?: string; dark?: string } object for per-mode values. If only one side is set, that value falls back to both modes. Use updateSidenetStyledConfig() to customize colors, radii, and fonts:

updateSidenetStyledConfig({
  theme: {
    // Single value applies to both modes
    radius: '0.5rem',
    fontFamily: '"Inter", sans-serif',

    // Per-mode values
    background: { light: '#ffffff', dark: '#09090b' },
    foreground: { light: '#09090b', dark: '#fafafa' },
    accentColor: { light: '#0ea5e9', dark: '#38bdf8' },
    userMessageBackground: { light: '#eff6ff', dark: '#1e3a5f' },
  },
});

Available Tokens

Token	Description
`radius`	Base border radius
`composerRadius`	Input area radius
`messageRadius`	Message bubble radius
`suggestionRadius`	Suggestion card radius
`sendButtonRadius`	Send button radius (default: pill)
`headerButtonRadius`	Header icon button radius
`selectRadius`	Dropdown trigger radius
`containerRadius`	Outer panel radius — applies to all layouts (sidebar, drawer, modal). Default: `0` (square)
`containerShadow`	Outer panel drop shadow. Applied to drawer + modal by default; sidebar stays flat. Set `none` to disable
`modalRadius`	Deprecated. Overrides `containerRadius` for `layout: 'modal'` only, when set
`threadMaxWidth`	Max width of conversation area
`fontFamily`	Font family
`accentColor`	Interactive element color
`background`	Main background
`foreground`	Main text color
`muted`	Secondary surface background
`mutedForeground`	Secondary text color
`border`	Border color
`userMessageBackground`	User bubble background
`userMessageForeground`	User bubble text
`userMessageBorder`	User bubble border
`assistantMessageBackground`	Assistant bubble background
`assistantMessageForeground`	Assistant bubble text
`assistantMessageBorder`	Assistant bubble border
`composerBackground`	Input area background
`suggestionBackground`	Suggestion card background
`suggestionBorder`	Suggestion card border

Custom CSS

initSidenet({
  copilotId: 'copilot-456',
  auth: { ...tokens },
  customCSS: `
    .aui-message-content { font-size: 14px; }
  `,
  // Or structured:
  customStyles: {
    '.aui-message-content': { 'font-size': '14px' },
  },
});