# Theming

The widget is fully themeable to match your brand: colors, typography, and message styling. Pass a `theme` object at mount, or update it live with `setTheme()`.

```ts
new CherryEmbed({
  appId: 'YOUR_EMBED_ID',
  container: '#cherry-chat',
  roomId: 'YOUR_ROOM_ID',
  theme: {
    mode: 'dark',
    primaryColor: '#FF5BA8',
    accentColor: '#7C5CFF',
    fontFamily: 'Inter',
    fontSize: 'md',
  },
});
```

Every field is optional: set only what you want to override; the rest fall back to sensible defaults derived from `mode` and `primaryColor`.

> **Tip:** Want to see these colors change in real time? The [live embed builder](https://cherry.fun/chat-embed-example/) lets you tweak presets, brand hue, and per-side accents with no signup, then copies a ready-to-paste integration snippet.

## Updating the theme at runtime

```ts
chat.setTheme({ primaryColor: '#22C55E' }); // merges with the current theme
chat.resetTheme();                          // clear back to defaults before applying a full new theme
```

> **Note:** When switching between full themes (e.g. a light/dark toggle), call `resetTheme()` first so stale derived colors don't leak into the new theme.

## Theme reference

`mode`, `fontSize`, and the colors below make up the `EmbedTheme` type. Colors accept any CSS color string (hex, rgb, rgba).

### Base

| Field | Type | Notes |
|---|---|---|
| `mode` | `'dark' \| 'light'` | Base variant; defaults the rest of the palette. |
| `primaryColor` | `string` | Primary brand color. |
| `accentColor` | `string` | Secondary/accent color. |
| `backgroundColor` | `string` | Widget background. |
| `surfaceColor` | `string` | Cards / surfaces. |
| `borderColor` | `string` | Borders / dividers. |

### Text

| Field | Notes |
|---|---|
| `textColor` | Primary text. |
| `textSecondaryColor` | Muted / secondary text. |
| `linkColor` | Hyperlinks. |
| `linkColorOwn` | Hyperlinks inside your own messages. |

### Message bubbles

| Field | Notes |
|---|---|
| `incomingBubbleColor` | Incoming bubble fill. |
| `incomingBubbleBorderColor` | Incoming bubble border. |
| `ownBubbleColor` | Your own bubble fill (defaults to a primary→accent gradient). |
| `ownBubbleTextColor` | Your own bubble text. |

### Header & input

| Field | Notes |
|---|---|
| `headerColor` / `headerTextColor` | Header bar background / text. |
| `inputColor` / `inputTextColor` | Composer background / text. |
| `sendButtonColor` / `sendButtonTextColor` | Send button fill / text. |

### Accents & chrome

| Field | Notes |
|---|---|
| `messageOwnAccentColor` / `messageOwnAccentSoftColor` | Reaction chips on your messages (active / passive). |
| `messageOtherAccentColor` / `messageOtherAccentSoftColor` | Reaction chips on others' messages. |
| `ownEmbedBgColor` / `otherEmbedBgColor` | Rich embed card backgrounds. |
| `messageActionsColor` / `messageActionsTextColor` | Hover message-actions menu. |
| `tooltipColor` / `tooltipTextColor` | Tooltips. |
| `emojiPickerColor` | Emoji picker surface. |
| `iconButtonColor` / `iconButtonHoverColor` | Icon buttons. |
| `avatarHoverColor` | Avatar hover ring. |
| `loaderColor` | Loading spinner. |
| `roleBadgeColor` | Role badge tint. |
| `modalOverlayColor` | Modal backdrop. |
| `dangerColor` | Destructive actions. |

### Typography

| Field | Type | Notes |
|---|---|---|
| `fontFamily` | `string` | Font name, e.g. `'Inter'`, `'Space Grotesk'`, `'system-ui'`. |
| `fontSize` | `'sm' \| 'md' \| 'lg'` | Base text size. |

> **Tip:** The interactive embed editor in the [dashboard](https://portal.cherry.fun/dashboard) previews these live and emits a ready-to-paste config, the fastest way to dial in a theme.

## Next steps

- [SDK API reference](https://portal.cherry.fun/docs/embed/api-reference.md), `setTheme`, events, and the full method surface.