💄 Add Mermaid theming to match colour scheme

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Site name, author and menus will now render Markdown and Emoji
 - Bundled Mermaid for better vendor dependency management
+- Mermaid diagrams are now themed to match the configured colour scheme
 
 ## [1.4.0] - 2021-10-20
 

layouts/partials/head.html

@@ -108,7 +108,10 @@
       <script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
       <script>
         document.addEventListener('DOMContentLoaded', (event) => {
-          mermaid.initialize({ theme: "default" });
+          function css(name) {
+            return getComputedStyle(document.documentElement).getPropertyValue(name);
+          }
+          mermaid.initialize({ theme: "base", themeVariables: { background: css("--color-neutral"), primaryColor: css("--color-primary-200"), secondaryColor: css("--color-secondary-200"), tertiaryColor: css("--color-neutral-100"), primaryBorderColor: css("--color-primary-400"), secondaryBorderColor: css("--color-secondary-400"), tertiaryBorderColor: css("--color-neutral-400"), lineColor: css("--color-neutral-600"), fontFamily: "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif", fontSize: "16px" }});
         });
       </script>
     {{ end }}