Merge pull request #86 from OleMussmann/configure-mermaid-theme

Configure mermaid theme

5 files changed, 73 insertions, 39 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 52a6767..7a5579d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -34,38 +34,6 @@
 
 </body>
 
-<script>
-
-  function isAuto() {
-    return document.body.classList.contains("auto");
-  }
-
-  function setTheme() {
-    if (!isAuto()) {
-      return
-    }
-
-    document.body.classList.remove("auto");
-    let cls = "light";
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      cls = "dark";
-    }
-
-    document.body.classList.add(cls);
-  }
-
-  function invertBody() {
-    document.body.classList.toggle("dark");
-    document.body.classList.toggle("light");
-  }
-
-  if (isAuto()) {
-    window.matchMedia('(prefers-color-scheme: dark)').addListener(invertBody);
-  }
-
-  setTheme();
-
-</script>
-
+<script src="{{ "js/theme-switch.js" | relURL }}"></script>
 <script defer src="{{ "js/copy-code.js" | relURL }}"></script>
-</html>
\ No newline at end of file
+</html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 159c328..6869a46 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -73,13 +73,17 @@
   </div>
 
   {{ if .Store.Get "hasMermaid" }}
-  <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-    mermaid.initialize({ startOnLoad: true });
+  {{ $mermaidDarkTheme := default "dark" (or .Params.mermaidDarkTheme .Site.Params.mermaidDarkTheme) }}
+  {{ $mermaidTheme := default "default" (or .Params.mermaidTheme .Site.Params.mermaidTheme) }}
+  <script defer
+    type="module"
+    id="mermaid_script"
+    data-light-theme="{{ $mermaidTheme }}"
+    data-dark-theme="{{ $mermaidDarkTheme }}"
+    src='{{ "js/mermaid.js" | relURL }}'>
   </script>
   {{ end }}
 
-
   {{/* Next prev controls */}}
 
   {{ if not (.Param "hidePagination") }}
diff --git a/static/js/mermaid.js b/static/js/mermaid.js
new file mode 100644
index 0000000..c348dc6
--- /dev/null
+++ b/static/js/mermaid.js
@@ -0,0 +1,28 @@
+import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+
+const this_js_script = document.getElementById('mermaid_script');
+const light_theme = this_js_script.getAttribute('data-light-theme');
+const dark_theme = this_js_script.getAttribute('data-dark-theme');
+
+function runmermaid() {
+  const theme = (document.body.classList.contains('dark') ? dark_theme : light_theme)
+  mermaid.initialize({ startOnLoad: false, theme: theme});
+  const items = document.querySelectorAll('.mermaid');
+  let counter = 0;
+  for (const item of items) {
+    const id = counter++;
+    if(item.originalCode === undefined) {
+      item.originalCode = item.textContent.trim();
+    }
+    mermaid.render("mermaid"+id, item.originalCode).then((val) => {
+      item.innerHTML = val.svg
+    }, (err) => {
+        console.log(err);
+        // Workaround: move incorrectly placed error messages into their diagram
+        item.innerHTML = "";
+        item.appendChild(document.getElementById("mermaid" + id));
+      });
+  }
+}
+document.addEventListener('DOMContentLoaded', runmermaid);
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', runmermaid);
diff --git a/static/js/theme-switch.js b/static/js/theme-switch.js
new file mode 100644
index 0000000..a617fda
--- /dev/null
+++ b/static/js/theme-switch.js
@@ -0,0 +1,28 @@
+function isAuto() {
+  return document.body.classList.contains("auto");
+}
+
+function setTheme() {
+  if (!isAuto()) {
+    return
+  }
+
+  document.body.classList.remove("auto");
+  let cls = "light";
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    cls = "dark";
+  }
+
+  document.body.classList.add(cls);
+}
+
+function invertBody() {
+  document.body.classList.toggle("dark");
+  document.body.classList.toggle("light");
+}
+
+if (isAuto()) {
+  window.matchMedia('(prefers-color-scheme: dark)').addListener(invertBody);
+}
+
+setTheme();
diff --git a/wiki/features/other-parameters.md b/wiki/features/other-parameters.md
index 2c4cfb0..136698e 100644
--- a/wiki/features/other-parameters.md
+++ b/wiki/features/other-parameters.md
@@ -89,4 +89,10 @@ You can easily generate favicons using [this website](https://realfavicongenerat
 
 ## Mermaid Diagrams
 
-Mermaid diagrams are supported by theme, just follow [this reference](https://gohugo.io/content-management/diagrams/#mermaid-diagrams) to use them.
\ No newline at end of file
+Mermaid diagrams are supported, just follow [this reference](https://gohugo.io/content-management/diagrams/#mermaid-diagrams) to use them. You can set Mermaid's light- and dark themes in your config; they switch with your blog's light/dark state. These are the defaults:
+
+```toml
+[params]
+mermaidTheme = "default"
+mermaidDarkTheme = "dark"
+```