Invalid mermaid colors when switching to dark/light mode, need to refresh page
Issue description
👋
Easy to see on https://jpanther.github.io/congo/samples/diagrams-flowcharts/
Switching from light to dark:
After page refresh:
Theme version
v2.10
Hugo version
v0.141
Which browser rendering engines are you seeing the problem on?
Chromium (Google Chrome, Microsoft Edge, Brave, Vivaldi, Opera, etc.)
URL to sample repository or website
No response
Hugo output or build error messages
as far as I know, this isn't REALLY something that congo/hugo controls...
The colors in the generated diagram are selected by mermaid at generation time.... it's possible that a solution would be to generate the diagram twice at site rendering time, with both polarities, and use the resulting image as css... but that feels.... like the wrong way forward?
color polarity is controlled entirely clientside.... so solutions have to be clientside based.. might wanna look at the mermaid.js site n see how they're solving it elsewhere.... may provide some ideas on a way forward.
but that feels.... like the wrong way forward?
Maybe not? 👀
This exact approach is implemented for the Site Logo partial. https://github.com/jpanther/congo/blob/89ae9809559cb6807b20749df32b16b01545caa8/layouts/partials/logo.html#L7-L22
Maybe this can help? https://discourse.gohugo.io/t/how-to-theme-mermaid-diagrams/48221/3
This is indeed an upstream issue and I'm not sure that forcing a page reload whenever the user changes dark mode is an ideal workaround. It seems to be a highly requested feature in Mermaid but is still yet to be implemented.
This issue has been automatically marked as stale because it has not had any recent activity. If you are still experiencing this issue, please review the issue history and add a reply with any requested and/or additional information in order to keep the issue open. This issue will automatically close in 30 days if no further activity occurs.