> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sidenet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Design and Theme

> Light/dark mode and design tokens.

## Light/Dark Mode

```typescript theme={null}
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:

```typescript theme={null}
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

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