Mermaid theme configuration

[p-mishra1]

I'm unable to change the mermaid theme configuration as on dark mode the default behavior is making it hard to see the diagrams.

[yatharthb97]

This definitely helped:
https://www.bodunhu.com/blog/posts/add-mermaid-to-hugo-with-dark-mode/

Or just set the theme option in the script (mermaidConfig) to 'dark'. 'neutral' also works.

[yatharthb97]

I have settled on the following script:

  {{ if .Page.Store.Get "hasMermaid" }}
   <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
       let isDark = document.body.className.includes("dark")
       let mermaidTheme = (isDark) ? 'dark' : 'forest';
       let mermaidConfig = {
           theme: mermaidTheme,
           logLevel: 'fatal',
           securityLevel: 'strict',
           startOnLoad: true,
           arrowMarkerAbsolute: false
       };
       mermaid.initialize(mermaidConfig);
   </script>
  {{ end }}

This however requires a reload to change the theme, i.e. it doesn't work with the theme toggle button. Any input on fixing that would be appreciated.

[adityatelange]

@yatharthb97 U can check this and modify to work with mermaid
adityatelange/adityatelange.github.io#2 (reply in thread)

[yatharthb97]

Thanks!

[BunnySakura]

try：

{{ if or .Params.mermaid .Site.Params.mermaid }}
<!-- MermaidJS support -->
<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/9.1.6/mermaid.min.js"></script>
<script>
    mermaid.initialize({
        startOnLoad: true,
        theme: localStorage.getItem("pref-theme") === "dark" ? "dark" : "forest" // 自动匹配默认或夜间模式主题。
    });
</script>
{{ end }}

see：
https://333rd.net/posts/tech/hugo%E4%BD%BF%E7%94%A8shortcodes%E8%BF%9B%E8%A1%8Cmermaid%E4%BD%9C%E5%9B%BE/