> Lettrove docs 1.x · https://docs.lettrove.com/docs/editor/theming

# Theming and white label

Two things make the editor look like part of your product:

1. **Your theme**: your colours, font and corners, in light and dark mode. You pass these in your
   page's code, in `appearance`.
2. **Your brand**: your product name and logo in the editor's bar. You set these once, in the
   dashboard.

Theming changes the **editor** — its panels, buttons and menus. It never changes the design your
user is making: an email looks on the canvas exactly as it will arrive in the inbox.

## Recipe 1: your company colour, in one line

Most products need only this. Give the editor your brand colour as `accent`:

```ts
createEditor({
  // …container, publishableKey, getToken
  appearance: {
    variables: { accent: '#5b3df5' }, // your brand colour
  },
});
```

```tsx
// React
<LettroveEditor appearance={{ variables: { accent: '#5b3df5' } }} /* …other props */ />
```

That one colour is used for selection, primary buttons and focus, **in both light and dark mode**.
The text on top of it is set to black or white automatically, whichever reads better on your colour.

## Recipe 2: light, dark, or follow the device

```ts
appearance: {
  theme: 'auto',  // the default: follows the device, and switches when it does
  // theme: 'light' — always light
  // theme: 'dark'  — always dark
  variables: { accent: '#5b3df5' },
}
```

## Recipe 3: match your product exactly, in light and dark

When your product has its own light and dark palettes, give the editor both. `variables` is the
light theme; `darkVariables` is the dark theme.

```ts
appearance: {
  theme: 'auto',
  variables: {
    // Light mode
    accent: '#5b3df5',
    surface: '#ffffff',       // top bar, inspector, menus
    surfaceRaised: '#f7f7fb', // block palette, history
    text: '#16161d',
    textMuted: '#5f6070',
    border: '#e3e3ea',
    radius: '10px',
    fontFamily: '"Inter", system-ui, sans-serif',
  },
  darkVariables: {
    // Dark mode
    accent: '#8b7bff',       // often a lighter tint of your brand colour reads better on dark
    surface: '#0f1117',
    surfaceRaised: '#171a22',
    text: '#eceef4',
    textMuted: '#9aa0ad',
    border: '#272b36',
  },
}
```

### What each token colours

| Token | Changes | Example |
|---|---|---|
| `accent` | Selection outlines, primary buttons, focus, active tabs | `#5b3df5` |
| `accentText` | Text and icons on `accent`. Leave it out: black or white is picked for you | `#ffffff` |
| `surface` | The editor's main background: the top bar, the inspector (block settings), menus and popovers | `#ffffff` |
| `surfaceRaised` | The block palette and the history panel, a step apart from the main background | `#f7f7fb` |
| `text` | Main text | `#16161d` |
| `textMuted` | Hints, captions, counts | `#5f6070` |
| `border` | Dividers and the outlines of inputs and buttons | `#e3e3ea` |
| `focusRing` | The outline that shows keyboard focus. Leave it out: it follows your `accent` | `#5b3df5` |
| `radius` | How round the corners of buttons and inputs are | `10px` |
| `fontFamily` | The editor's own font (not the font in your users' designs) | `"Inter", system-ui, sans-serif` |

Every token is optional. A token you leave out keeps Lettrove's value for that theme.

### What carries from light into dark

`accent`, `accentText`, `focusRing`, `radius` and `fontFamily` set in `variables` also apply in
dark mode, unless `darkVariables` sets them. Background and text colours are **not** carried over,
because a light background in dark mode would be unreadable; dark mode keeps Lettrove's dark palette
until you set your own in `darkVariables`.

So:

| You set | Light mode | Dark mode |
|---|---|---|
| `variables: { accent }` | your accent | your accent, on Lettrove's dark panels |
| `variables` and `darkVariables` | your light palette | your dark palette |
| nothing | Lettrove's light theme | Lettrove's dark theme |

### Fonts

The editor runs on its own site, inside a frame, so a font loaded on *your* page is not available in
it. Use a system font stack (`system-ui, sans-serif`), or name a font the user's device has. Your
users' *designs* use the fonts chosen in the editor; this setting only changes the editor's own text.

## Recipe 4: your own light / dark switch

If your product has its own theme switch, hide the editor's and tell the open editor when yours
changes:

```ts
const editor = await createEditor({
  // …
  features: { themeSwitch: false },
  appearance: { theme: myApp.theme }, // 'light' | 'dark' | 'auto'
});

myApp.onThemeChange(async (theme) => {
  const applied = await editor.setTheme(theme);
  // applied: 'light' or 'dark' — for 'auto', what the device is set to
});
```

In React, change the `appearance.theme` prop; the open editor switches without reopening.

If you keep the editor's own switch, it tells you when your user changes it, so you can remember
their choice and pass it back next time:

```ts
editor.on('theme:changed', ({ theme }) => savePreference(theme)); // 'light' | 'dark' | 'auto'
```

## Recipe 5: which side the panels sit on

```ts
appearance: {
  panels: {
    palette: { dock: 'right' },  // the block palette — default 'left'
    inspector: { dock: 'left' }, // the block settings — default 'right'
  },
}
```

## Your product name and logo

Your users see your product name and logo at the left of the editor's bar, so the editor reads as
part of your product. You set them once, and they apply to every editor in the project.

1. Go to lettrove.com → **Settings → Embed** and open your project.
2. In **Branding**, type your **Product name** (up to 60 characters).
3. For **Logo**, click **Upload** to upload an image (PNG, JPEG, GIF, WebP or SVG; we keep it), or
   paste the `https://` link to a logo your product hosts.
4. Check the **Preview**: it shows the bar exactly as your users will see it, in the same size.
5. Click **Save branding**.

Editors that open after you save show it; an editor already open keeps what it opened with until
it next opens. Leave either field empty to show none.

**Your page cannot set or remove these.** Anyone can change a web page's code in their browser, so
the name and logo come only from your project's settings, never from `createEditor`. That way no one
can put another company's name on your editor.

**Tips for the logo**: a wide logo about 24 pixels tall reads best (the bar draws it at most 24px tall
and 160px wide). An SVG or a PNG with a transparent background looks right in both light and dark
mode. A dark logo can disappear on a dark editor: switch lettrove.com to dark mode and the Preview
shows you how it looks there.

## "Powered by Lettrove"

Off by default. To show it, pass `branding: { poweredBy: true }`.

## Something you need that is not here?

The tokens above are the whole list for 1.x. You cannot style the editor's markup with your own
CSS: that would break the next time the editor is improved. If you need a token we do not have, tell
us at support@lettrove.com; new tokens are added in minor releases.