Style Mermaid diagrams to match light/dark mode

This could look better but it's a good start to make the diagrams match the light/dark theme.

There is a bug in here that switching themes doesn't update the diagram (but it works on future loads)

Signed-off-by: Nic Cope <nicc@rk0n.org>

Co-authored-by: Pete Lumbis <pete@upbound.io>

themes/geekboot/layouts/partials/single-list.html

@@ -77,8 +77,49 @@
   </div>
 
   {{ if .Page.Store.Get "hasMermaid" }}
-  <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-    mermaid.initialize({ startOnLoad: true });
-  </script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
+<script type="module">
+
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+  document.addEventListener("DOMContentLoaded", setMermaidStyle());
+  document.addEventListener("DOMContentLoaded", colorModeListener());
+
+  function getMermaidConfig(){
+    var style = getComputedStyle(document.body)
+    var font = style.getPropertyValue("font-family")
+    var fontColor = style.getPropertyValue('--body-font-color')
+    var backgroundColor = style.getPropertyValue('--body-background')
+
+    var config = {
+      "theme": "base",
+      "fontFamily": font,
+      "themeVariables": {
+        "background": backgroundColor,
+        "textColor": fontColor,
+        }
+    }
+
+    return config
+  }
+
+  function setMermaidStyle(){
+    var config = getMermaidConfig()
+    mermaid.initialize( config )
+  }
+
+  function colorModeListener(){
+    darkSwitch.addEventListener("click", resetMermaidStyle())
+  }
+
+  function resetMermaidStyle(){
+    console.log("resetting")
+
+    var config = getMermaidConfig()
+    console.log(config)
+    mermaid.mermaidAPI.setConfig( config )
+    mermaid.mermaidAPI.reset()
+
+  }
+
+</script>
 {{ end }}