Theme

Customize colors and fonts to match your brand.

Customize colors and fonts to match your brand:

const { html } = await render(markdown, {
  theme: {
    brandColor: '#e11d48',
    buttonColor: '#e11d48',
    fontFamily: 'Georgia, serif',
  }
});

Dark Mode

A built-in dark theme is available. Pass it directly to flip all colors at once:

import { render, darkTheme } from 'emailmd';

const { html } = await render(markdown, { theme: darkTheme });

Or use it as a base and override individual values:

const { html } = await render(markdown, {
  theme: { ...darkTheme, brandColor: '#e11d48' },
});

You can also activate it per-email via frontmatter — see Frontmatter.

Web Fonts

To use a font beyond the web-safe stack (e.g. Google Fonts), pass a fonts map alongside theme. Each entry renders as an <mj-font> tag, loading the stylesheet in clients that support embedded web fonts:

const { html } = await render(markdown, {
  fonts: {
    Inter: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
  },
  theme: {
    fontFamily: 'Inter, sans-serif',
  },
});

The font family still has to be named in fontFamily to actually apply — fonts only ships the stylesheet link. MJML drops unused entries automatically.

The same thing works from markdown with a nested fonts: map in frontmatter. See Frontmatter → Custom Fonts.

All Theme Options

The dark theme inverts the color palette — light text on dark backgrounds — while keeping the same typography settings. You can import darkTheme directly or activate it per-email via frontmatter.