Mermaid charts are vague when switch to dark theme

[Minys233]

Summary

I note when switching themes between dark/light, the background color is also changing, aka data-theme="dark". But things are different when it comes to mermaid charts. There is neither option to set mermaid color theme, nor dynamic reload when you change page theme from light to dark. This makes the black lines nearly disappear in the dark theme.

Description

Mermaid is introduced in file layouts/partials/third-party/mermaid.html. There should be an option to specify theme in one of four candidates: ["default", "forest", "dark", "neutral"], refer to mermaid source code. When MEME load mermaid, the chart will be displayed in default color theme, which will make the black lines almost vanish! For example, in my blog, the last chart in dark theme.

Suggestions

I did some Googling and tests in and find two ways to solve it. The first one is easy but kind of stupid, while the second one is superior but needs more coding.

• In mermaid.html mentioned above, directly specify theme: 'forest'. Or add an option in config.toml and let users decide.
• Re-render charts when switch page theme
  • Available approaches do this by this function: mermaid.init. First remove data-processed property, which make mermaid thinks the DOM nodes are not processed. Then, render them with new parameters.
    • https://markdownmonster.west-wind.com/docs/_5ef0x96or.htm
    • Add support for Mermaid.js diagrams HugoBlox/hugo-blox-builder#1111

Thank you for your time and this excellent theme!

[reuixiy]

Thanks for your detailed feedback.

I'v looked into this and found the 2nd approach does not work with mermaid v8.5.2 anymore.

But I think I found a solution for this. :)