From 6d1c51c037acb4e9194ca10175955007a3f2621a Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Thu, 28 Oct 2021 15:01:19 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20Mermaid=20theming=20to=20m?=
 =?UTF-8?q?atch=20colour=20scheme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md               | 1 +
 layouts/partials/head.html | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 95b75b03..06659675 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index bffec873..f9eb9534 100644
--- a/layouts/partials/head.html
+++ b/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 }}