Chart in dark mode

[Jh123x]

Issue description

Problems

Dark mode for chart does not work as expected

1. Words cannot be seen clearly
2. Legends cannot be seen clearly

Markdown snippet

### Sankey Chart
{{< mermaid >}}
sankey-beta

Applied, Unsuitable, 2
Applied, Rejected, 19
Applied, OA, 8
OA, Rejected, 5
OA, Interview, 3
Interview, Rejected, 2
Interview, Offer, 1
Internship Convert, Offer, 1
Offer, Accepted, 1
{{< /mermaid >}}

### Response rate

{{< mermaid >}}
pie title Responded to application
"No" : 19
"Yes" : 8
{{< /mermaid >}}

### Interview Rate

{{< mermaid >}}
pie title Interview Rate
"No" : 5
"Yes" : 3
{{< /mermaid >}}

Theme version

v2.7.4

Hugo version

hugo v0.120.4-f11bca5fec2ebb3a02727fb2a5cfb08da96fd9df+extended windows/amd64 BuildDate=2023-11-08T11:18:07Z VendorInfo=gohugoio

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

https://jh123x.com/blog/2023/my-job-search/

Hugo output or build error messages

N/A

[jpanther]

Thanks, I'll see if I can work out why the mermaid theme is not applying to these items. Out of interest, is there a reason you're opting to use the experimental charting features in mermaid instead of the existing chart.js library in the theme?

[Jh123x]

Thanks, I'll see if I can work out why the mermaid theme is not applying to these items. Out of interest, is there a reason you're opting to use the experimental charting features in mermaid instead of the existing chart.js library in the theme?

I had some previous experience in PlantUML. When mermaid was added, I was just curious and wanted to give it a go.

[jpanther]

I've been able to narrow down where this issue arises for the pie charts. It's a bit of an oddity in how the mermaid theming works for these diagrams as it doesn't inherit all the styles from the base theme in the same way as the others. I've also taken another pass at how mermaid is being themed in Congo so that it better styles elements in dark mode. This should make all the diagrams look a little more consistent across the various modes.

There are two caveats though:

1. Mermaid doesn't support live theme switching yet and so it won't swap the colours until the page is reloaded.
2. The sankey diagram doesn't support theming yet so I can't fix the background colour in dark mode. That diagram seems to have hard coded CSS values in the output and so while I could override them in Congo it's getting a little hacky for my liking. Hopefully they'll address this in the upstream project as the feature moves through beta.

If you want to try address the sankey issue in your project by overriding the CSS with a media query, the mix-blend-mode: multiply; is the part you need to prevent when the site is in dark appearance.

I'll push the other fixes shortly.