How to theme mermaid diagrams?

[razon]

@Mohit_Kanwar

If required, we may detect the theme change event, and {{ if .Page.Store.Get “hasMermaid” }}, then reload the page automatically

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.

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

• Reinitialize with new theme · Issue #1945 · mermaid-js/mermaid · GitHub
• HB Framework example: mermaid/assets/hb/modules/mermaid/init.ts at main · hbstack/mermaid · GitHub
• Live Example: Hugo Mermaid Module - Content - Docs - HugoMods