congo icon indicating copy to clipboard operation
congo copied to clipboard

Invalid mermaid colors when switching to dark/light mode, need to refresh page

Open angristan opened this issue 11 months ago • 4 comments

Issue description

👋

Easy to see on https://jpanther.github.io/congo/samples/diagrams-flowcharts/

Switching from light to dark:

Image

After page refresh:

Image

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


angristan avatar Jan 25 '25 18:01 angristan

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.

wolfspyre avatar Jan 26 '25 00:01 wolfspyre

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

AvinashReddy3108 avatar Feb 07 '25 08:02 AvinashReddy3108

Maybe this can help? https://discourse.gohugo.io/t/how-to-theme-mermaid-diagrams/48221/3

AvinashReddy3108 avatar Feb 07 '25 09:02 AvinashReddy3108

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.

jpanther avatar Feb 24 '25 00:02 jpanther

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.

github-actions[bot] avatar Jun 24 '25 03:06 github-actions[bot]