Built-in Mermaid Themes

Mermaid has 5 built-in themes. Here's how the same diagram looks in each.

---

Theme: Default

The standard Mermaid theme with blue tones.

---

Theme: Neutral

Clean grayscale, professional look.

---

Theme: Dark

Optimized for dark backgrounds.

---

Theme: Forest

Green nature-inspired tones.

---

Theme: Base

Minimal theme for full customization.

---

Theme Comparison Table

Theme	Best For	Colors
Default	General use	Blue/gray
Neutral	Professional docs	Grayscale
Dark	Dark mode sites	Dark bg, light text
Forest	Nature/eco themes	Greens
Base	Custom styling	Minimal

---

Custom Theme Variables

You can customize theme variables:

Available Theme Variables

Variable	Controls
primaryColor	Main node background
primaryTextColor	Main node text
primaryBorderColor	Main node border
secondaryColor	Secondary elements
tertiaryColor	Tertiary elements
lineColor	Arrows and lines
background	Diagram background
fontFamily	Font face
fontSize	Text size