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:

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

// 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

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.

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:

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:

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

Recipe 5: which side the panels sit on

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.