# Guide: Theme your embed

Your embed is mounted and running on the Cherry defaults. This guide takes it from there to a chat that reads as part of your product, in a few honest lines of config.

**You'll need:** a working embed (see the [Quickstart](https://portal.cherry.fun/docs/quickstart.md)) and your brand's colors, or just your site's URL if you want an AI agent to pull them for you.

## 1. Set the mode and primary color

Two values get you most of the way. Pick `mode` from your app's real surface (dark or light), and set `primaryColor` to your brand color:

```ts
const chat = new CherryEmbed({
  appId: 'YOUR_EMBED_ID',
  container: '#cherry-chat',
  roomId: 'YOUR_ROOM_ID',
  theme: { mode: 'dark', primaryColor: '#9162FF' },
});
```

`primaryColor` drives your own message bubbles and the send button, so the chat immediately reads as yours. Everything else sits on a neutral base derived from the mode.

## 2. Complete the seeds

Add two or three more colors and the embed derives its whole palette from them (surfaces, chrome, links, inks, borders), with contrast floors enforced:

```ts
theme: {
  mode: 'dark',
  primaryColor: '#9162FF',    // brand color: own bubble + send button
  backgroundColor: '#0D0416', // app content surface: background + surfaces
  accentColor: '#FF57C1',     // secondary highlight: links + mentions
  // incomingBubbleColor: '#1a1030', // optional: a distinct color for received messages
}
```

The one thing that matters here is honest inputs. Take `backgroundColor` from your app's actual content surface, not a colored header or a hero image; a colored nav band is chrome, not the background. Set `accentColor` to the secondary color you use for links and highlights. Leave `incomingBubbleColor` unset unless your brand has its own second color for received messages. Pass the honest seeds and let the engine derive the rest, rather than hand-setting individual slots.

## 3. Or let an AI agent extract them

If you would rather not read colors off your own site by hand, hand it to an agent. The embed editor in the [dashboard](https://portal.cherry.fun/dashboard) generates a setup prompt that already carries the theme methodology; copy it into your AI assistant, give it your site's URL, and it extracts the seeds by role and applies them.

Agents that read Markdown can also fetch the full extraction playbook directly:

```
https://portal.cherry.fun/docs/embed/theming.md
```

## 4. Check it with your eyes

Applying is not the same as done. Screenshot the embed in place and look at it: do incoming bubbles read clearly, are links visible, does your own bubble feel like your primary button? The engine holds three contrast floors for you (body text and incoming text at least 4.5:1, the send icon at least 3:1), so if something looks off it is almost always a wrong input, usually the mode or a chrome color mistaken for the background. Fix the seed, not the output.

## 5. Adjust a single slot when you need to

The seeds cover most brands. When you have a specific measured value to place (a header tint, an exact ink your brand authors), set that one slot and the engine keeps deriving everything else:

```ts
theme: {
  mode: 'dark',
  primaryColor: '#9162FF',
  backgroundColor: '#0D0416',
  headerColor: '#150A22', // one measured override, everything else stays derived
}
```

Every settable key is in the [theme reference](https://portal.cherry.fun/docs/embed/theming.md#theme-reference). Reach for an override when you have a value to place, not as the default workflow: composing the whole palette by hand fights the engine. And if your brand's fill is genuinely a gradient, add `gradients: 'on'` (or pass a measured `linear-gradient(...)` as the fill) instead of a flat color.

## Where next

- The full extraction method, contrast rules, and every theme key → [Theming](https://portal.cherry.fun/docs/embed/theming.md).
- Point an AI agent at the whole integration → [For AI agents](https://portal.cherry.fun/docs/ai/for-ai-agents.md).