Theme
Customize colors and fonts to match your brand.
Customize colors and fonts to match your brand:
const { html } = 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 } = render(markdown, { theme: darkTheme });Or use it as a base and override individual values:
const { html } = render(markdown, {
theme: { ...darkTheme, brandColor: '#e11d48' },
});You can also activate it per-email via frontmatter — see Frontmatter.
All Theme Options
| Key | Light Default | Dark Default | Description |
|---|---|---|---|
brandColor | #18181b | #fafafa | Links, highlights, accents |
headingColor | #09090b | #fafafa | Heading text |
bodyColor | #71717a | #a1a1aa | Body text |
backgroundColor | #fafafa | #09090b | Outer background |
contentColor | #ffffff | #18181b | Content area background |
cardColor | #f4f4f5 | #27272a | Callout / code block background |
buttonColor | #18181b | #fafafa | Primary button background |
buttonTextColor | #fafafa | #18181b | Button text |
fontFamily | Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | (same) | Font stack |
fontSize | 16px | (same) | Base font size |
lineHeight | 1.6 | (same) | Base line height |
contentWidth | 600px | (same) | Email width |
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.