Skip to main content

​
Light/Dark Mode

initSidenet({
  orgId: 'org-123',
  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

TokenDescription
radiusBase border radius
composerRadiusInput area radius
messageRadiusMessage bubble radius
suggestionRadiusSuggestion card radius
sendButtonRadiusSend button radius (default: pill)
headerButtonRadiusHeader icon button radius
selectRadiusDropdown trigger radius
containerRadiusOuter panel radius — applies to all layouts (sidebar, drawer, modal). Default: 0 (square)
containerShadowOuter panel drop shadow. Applied to drawer + modal by default; sidebar stays flat. Set none to disable
modalRadiusDeprecated. Overrides containerRadius for layout: 'modal' only, when set
threadMaxWidthMax width of conversation area
fontFamilyFont family
accentColorInteractive element color
backgroundMain background
foregroundMain text color
mutedSecondary surface background
mutedForegroundSecondary text color
borderBorder color
userMessageBackgroundUser bubble background
userMessageForegroundUser bubble text
userMessageBorderUser bubble border
assistantMessageBackgroundAssistant bubble background
assistantMessageForegroundAssistant bubble text
assistantMessageBorderAssistant bubble border
composerBackgroundInput area background
suggestionBackgroundSuggestion card background
suggestionBorderSuggestion card border

​
Custom CSS

initSidenet({
  orgId: 'org-123',
  customCSS: `
    .aui-message-content { font-size: 14px; }
  `,
  // Or structured:
  customStyles: {
    '.aui-message-content': { 'font-size': '14px' },
  },
});