mdast2docx logo Md2Docx
Version 0.1.0

Themes & Custom Palettes

Updated 5 min ago

Built-in editor themes and custom color palettes in @m2d/mermaid-node.

@m2d/mermaid-node ships with 15 carefully curated themes matching popular IDE palettes.

Built-In Themes

Select any built-in theme via the theme option:

import { mermaidNodePlugin } from "@m2d/mermaid-node";

// Light themes: "zinc-light", "github-light", "tokyo-night-light", "catppuccin-latte", "nord-light", "solarized-light"
// Dark themes: "zinc-dark", "github-dark", "tokyo-night", "tokyo-night-storm", "catppuccin-mocha", "nord", "dracula", "solarized-dark", "one-dark"
const plugin = mermaidNodePlugin({
  theme: "github-light",
});

Custom Themes (Two-Color Mono Mode)

Every diagram can be derived from just two colors: bg (background) and fg (foreground text/lines):

const customMonoPlugin = mermaidNodePlugin({
  theme: {
    bg: "#ffffff",
    fg: "#1e293b",
  },
});

Enriched Custom Themes

You can optionally override individual semantic roles:

const customEnrichedPlugin = mermaidNodePlugin({
  theme: {
    bg: "#ffffff",
    fg: "#0f172a",
    line: "#3b82f6",     // Connector lines
    accent: "#2563eb",   // Arrow heads, highlights
    muted: "#64748b",    // Edge labels, secondary text
    surface: "#f8fafc",  // Node fill tint
    border: "#cbd5e1",   // Node borders
  },
});

On this page