How to theme mermaid diagrams?

tips & tricks
1

Following the approach as mentioned on Diagrams | Hugo (gohugo.io)

However, I would like to enhance the approach by supporting dark and light themes.

{{ 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, theme: 'dark', });
  </script>
{{ end }}

Hardcoding the theme dark or any other works. however, I want to determine which mode has the user selected on runtime, so that the mermaid digarms know which colour scheme to beused.
How can I determine if theme:‘dark’ or theme:‘forest’ needs to be selected?

2

I have tried the following :

{{ if .Page.Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    let mermaidTheme = "default";
    if (localStorage.getItem("pref-theme") === "dark") {
      mermaidTheme = "dark";
    }
    mermaid.initialize({ startOnLoad: true, theme: mermaidTheme, });
  </script>
{{ end }}

It works pretty fine. The only downside is that if the user is already on the page with mermaid diagram, and then changes the theme, mermaid is not able to capture new mode. The page refresh is required,

If required, we may detect the theme change event, and {{ if .Page.Store.Get “hasMermaid” }}, then reload the page automatically. (I have not implemented it as of now)

3

You can save the source with another attribute via JavaScript, such as data-src, when theme changing, then re-render the diagram from data-src, this approach would be friendly for UE.

mermaid-theming

It depends on how you implement the theming, the following references may help.