Dark mode

The editor supports three theme modes, set via the theme attribute:

<!-- Follow the user's OS preference (default) -->
<email-builder theme="auto" api-key="..." user-id="..." />

<!-- Always light -->
<email-builder theme="light" api-key="..." user-id="..." />

<!-- Always dark -->
<email-builder theme="dark" api-key="..." user-id="..." />

Switch dynamically:

builder.updateConfig({ theme: 'dark' });

---

Accent color (Agency+)

Override the primary accent color with any valid CSS color. All interactive elements — buttons, focus rings, active states — update automatically. The editor derives light, dark, and muted variants using color-mix(), so you only need to set one value.

builder.updateConfig({ accentColor: '#ef4444' });      // red
builder.updateConfig({ accentColor: 'hsl(217 91% 60%)' }); // blue
builder.updateConfig({ accentColor: '#10b981' });      // emerald

TIP

accentColor requires an Agency plan or above. On lower tiers the option is silently ignored.

---

White-label (Agency+)

Remove or replace the "Email Builder" branding in the toolbar.

Custom brand name

builder.updateConfig({ brandName: 'Acme Mailer' });

Replaces "Email Builder" in the top-left with your product name.

Hide branding entirely

builder.updateConfig({ hideBranding: true });

Removes the logo mark and brand name from the toolbar entirely.

Full white-label config

builder.updateConfig({
  accentColor:  '#0ea5e9',
  brandName:    'Acme Mailer',
  hideBranding: false, // show 'Acme Mailer' but no MMS logo
});

---

CSS custom properties

The editor is rendered inside a Shadow DOM. All visual tokens are CSS custom properties on the :host element, which means you can override them from the outside:

email-builder {
  --eb-accent:      #ef4444;
  --eb-bg:          #f0f4f8;
  --eb-surface:     #ffffff;
  --eb-text:        #111827;
  --eb-border:      #e5e7eb;
  --eb-text-muted:  #6b7280;
}

INFO

CSS custom properties control visual appearance only — colors, backgrounds, borders, and typography. They have no effect on plan-gated features such as hideBranding, brandName, or accentColor, which are enforced in JavaScript at the SDK level regardless of any CSS overrides.

Full token list

Variable	Default (light)	Default (dark)
--eb-bg	#dde3ed	#1a1a2e
--eb-surface	#ffffff	#1e1e30
--eb-surface-2	#f8fafc	#252538
--eb-border	#e2e8f0	#2d2d44
--eb-text	#0f172a	#e2e8f0
--eb-text-muted	#64748b	#94a3b8
--eb-accent	#6366f1	#6366f1