Mermaid Diagram Theming
Quarto v1.3 updates Mermaid to version 9.2.2, and adds a number of theming options to diagram.
Default Mermaid Theme
Starting in v1.3, Quarto will use the current theme’s colors for Mermaid diagrams by default. If you use Quarto’s bootswatch built-in themes (or a custom theme that uses the same SCSS variables), Mermaid diagrams in Quarto will automatically follow your project themes.
The SCSS variables used by the default Mermaid theme shipped with quarto, together with their default values, are:
$mermaid-bg-color: $body-bg;
$mermaid-edge-color: $secondary;
$mermaid-node-fg-color: $body-color;
$mermaid-fg-color: $body-color;
$mermaid-fg-color--lighter: $body-color-lighter;
$mermaid-fg-color--lightest: $body-color-lightest;
$mermaid-font-family: $font-family-sans-serif;
$mermaid-label-bg-color: $body-bg;
$mermaid-label-fg-color: $primary;
$mermaid-node-bg-color: $primary-transparent;
$mermaid-node-fg-color: $primary;
These have CSS variable counterparts that can also be overridden:
:root {
--mermaid-bg-color: #{$mermaid-bg-color};
: #{$mermaid-edge-color};
--mermaid-edge-color: #{$mermaid-node-fg-color};
--mermaid-node-fg-color: #{$mermaid-fg-color};
--mermaid-fg-color: #{$mermaid-fg-color--lighter};
--mermaid-fg-color--lighter: #{$mermaid-fg-color--lightest};
--mermaid-fg-color--lightest: #{$mermaid-font-family};
--mermaid-font-family: #{$mermaid-label-bg-color};
--mermaid-label-bg-color: #{$mermaid-label-fg-color};
--mermaid-label-fg-color: #{$mermaid-node-bg-color};
--mermaid-node-bg-color: #{$mermaid-node-fg-color};
--mermaid-node-fg-color }
Built-in Themes
If you want to use Mermaid’s own themes, you can do so by configuring the mermaid
option in your YAML front matter:
html:
mermaid:
theme: forest
The available themes from mermaid are: default
, dark
, forest
, and neutral
.