Configure Mermaid for a native look

layouts/partials/extend_head.html

@@ -5,10 +5,7 @@
 
 <!-- Mermaid diagrams -->
 {{ if .Params.xparams.mermaid }}
-  <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.13.0/dist/mermaid.esm.min.mjs';
-    mermaid.initialize({ startOnLoad: true });
-  </script>
+  {{ partialCached "mermaid.html" . }}
 {{ end }}
 
 <!-- React components -->

layouts/partials/mermaid.html

@@ -0,0 +1,29 @@
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.13.0/dist/mermaid.esm.min.mjs';
+
+  // Read PaperMod's CSS variables to theme Mermaid
+  const s = getComputedStyle(document.documentElement);
+  const v = (name) => s.getPropertyValue(name).trim();
+
+  mermaid.initialize({
+    startOnLoad: true,
+    theme: 'base',
+    flowchart: {
+      padding: 15,
+      nodeSpacing: 30,
+      useMaxWidth: true,
+      htmlLabels: true,
+    },
+    themeVariables: {
+      primaryColor: v('--code-bg'),
+      primaryTextColor: v('--content'),
+      primaryBorderColor: v('--border'),
+      lineColor: v('--secondary'),
+      secondaryColor: v('--code-bg'),
+      tertiaryColor: v('--theme'),
+      // these are PaperMod's defaults
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
+      fontSize: '14px',
+    }
+  });
+</script>