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

[angristan]

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

[wolfspyre]

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.

[AvinashReddy3108]

but that feels.... like the wrong way forward?

Maybe not? 👀

This exact approach is implemented for the Site Logo partial.

congo/layouts/partials/logo.html

Lines 7 to 22 in 89ae980

	<img
	src="{{ $logo.RelPermalink }}"
	width="{{ div $logo.Width 2 }}"
	height="{{ div $logo.Height 2 }}"
	class="max-h-[10rem] max-w-[10rem] object-scale-down object-left
	{{ if $logo_dark }}hidden dark:flex{{ end }}"
	alt="{{ .Site.Title }}"
	/>
	{{- if $logo_dark }}
	<img
	src="{{ $logo_dark.RelPermalink }}"
	width="{{ div $logo_dark.Width 2 }}"
	height="{{ div $logo_dark.Height 2 }}"
	class="max-h-[10rem] max-w-[10rem] object-scale-down object-left dark:hidden"
	alt="{{ .Site.Title }}"
	/>

[AvinashReddy3108]

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

[jpanther]

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.