Themes

Customize the look of animated diagrams with CSS custom properties. Each <mermaid-flow-player> can be styled independently.

Live Theme Gallery

How It Works

Each theme is just CSS custom properties scoped to a container:

Default (Light)

No extra CSS needed — uses built-in defaults.

<mermaid-flow-player>
  <pre class="mermaid">graph LR; A-->B-->C</pre>
</mermaid-flow-player>

With theme attribute:

<script src="https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/mermaid-flow-player.element.js"></script>

<!-- Light theme (default) -->
<mermaid-flow-player controls theme="light">
graph LR; A-->B-->C
</mermaid-flow-player>

<!-- Dark theme -->
<mermaid-flow-player controls theme="dark">
graph LR; A-->B-->C
</mermaid-flow-player>

<!-- Auto theme (follows system preference) -->
<mermaid-flow-player controls theme="auto">
graph LR; A-->B-->C
</mermaid-flow-player>

Dark Theme

.dark-theme {
  --mf-control-bg: #2a2a2a;
  --mf-control-border: #444;
  --mf-control-text: #e0e0e0;
  --mf-control-hover-bg: #3a3a3a;
  --mf-narration-bg: #1e1e1e;
  --mf-narration-text: #ccc;
}

Ocean Theme

.ocean-theme {
  --mf-control-bg: #e3f2fd;
  --mf-control-border: #90caf9;
  --mf-control-text: #0d47a1;
  --mf-control-hover-bg: #bbdefb;
  --mf-narration-bg: #e8f5e9;
  --mf-narration-text: #1b5e20;
}

Custom Per-Element

<mermaid-flow-player style="
  --mf-control-bg: #fff3e0;
  --mf-control-text: #e65100;
">
  <pre class="mermaid">graph LR; A-->B</pre>
</mermaid-flow-player>

CSS Variables Reference

Variable	Default	Description
--mf-active-color	#4caf50	Active node highlight
--mf-visited-color	#2196f3	Visited node color
--mf-active-stroke	#3b82f6	Active node/edge stroke color
--mf-active-stroke-width	3px	Active node/edge stroke width
--mf-visited-stroke	#3b82f6	Visited node/edge stroke color
--mf-visited-stroke-width	2px	Visited node/edge stroke width
--mf-visited-opacity	1	Visited node opacity
--mf-transition-duration	220ms	Animation transition speed
--mf-control-bg	#f5f5f5	Button background
--mf-control-border	#ddd	Button border
--mf-control-text	#333	Button text color
--mf-control-hover-bg	#e0e0e0	Button hover background
--mf-control-border-radius	4px	Button corner radius
--mf-control-padding	8px 16px	Button padding
--mf-control-gap	8px	Gap between controls
--mf-narration-bg	#f0f0f0	Narration bar background
--mf-narration-text	#333	Narration text color
--mf-narration-padding	10px	Narration padding
--mf-narration-font-size	14px	Narration font size

Theme Persistence

Themes persist across page loads via localStorage:

import { initTheme } from 'mermaid-flow-player';

initTheme({ theme: 'auto' }); // follows prefers-color-scheme

URL Configuration

Set theme via URL query parameter:

https://your-site.com/diagrams?theme=dark

See Query Parameters for more.