Add Mermaid theme switch respecting dark/light toggle

[h-enk]

Summary

Add a Mermaid theme switch respecting the dark/light toggle. So, default Mermaid theme when toggled light, and dark Mermaid theme when toggled dark.

Basic example

See e.g. Drawing diagrams in Sanity with Mermaid.js.

Motivation

Better dark mode support.

[MichaelSasser]

If there is a way to determine if dark-mode is enabled from the shortcode, you can modify it to toggle this line %%{init: { 'theme': 'dark' } }%% or just the theme default/dark. Here a dark-theme example:

{{< mermaid class="text-center">}}
%%{init: { 'theme': 'dark' } }%%
flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

Source: https://mermaid-js.github.io/mermaid/#/./directives

[h-enk]

Thanks! Interesting (didn't know that), I will have a look into that (I think it's possible).

[MichaelSasser]

I just played a little with it. I "abused" logo-light and logo-dark to determine if dark-mode is enabled.
It definitely is not happy when switching the theme like this, after it has been rendered. In FF, it shows Syntax error in graph instead of the graph. With Chrome, it shows "nothing". In both cases, the rest of the page is fine. When the page gets refreshed, mermaid comes good again with the new theme. That happens, every time the theme is toggled.
On Chrome Android, mermaid's dark theme shows a dark font color on a dark background.
I guess that would be resolved, when just the init line would be toggled instead of the whole thing. Or it needs to be re-rendered.
But I'm fairly new to doks (which btw is gorgeous), and I need to learn more about it (and hugo), to figure out a better way.

<!-- layouts/shortcodes/mermaid.html -->
<!-- ignore the figure and caption part -->
{{ if .Page.Params.mermaid -}}
<figure{{ with .Get "figure_class" }} class="{{.}}"{{ end }}>
<div class="text-center">
  <div class="logo-dark d-none">
    <div class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
      %%{init: { 'theme': 'dark' } }%%
      {{ $data := replaceRE "(^\\s+```)" "" .Inner -}}
      {{ replaceRE "(```\\s+$)" "" $data -}}
    </div>
  </div>
  <div class="logo-light">
    <div class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
      %%{init: { 'theme': 'default' } }%%
      {{ $data := replaceRE "(^\\s+```)" "" .Inner -}}
      {{ replaceRE "(```\\s+$)" "" $data -}}
    </div>
  </div>
</div>
{{ with .Get "caption" }}<figcaption class="figure-caption"><center><em>{{ . | safeHTML }}</em></center></figcaption>{{ end }}
</figure>
{{ else -}}
  {{ errorf "Failed to process mermaid shortcode: %s. Set mermaid to true in page front matter." .Position }}
{{ end -}}

I'm using the child version of doks. To be able to use mermaid, I added the following mount.

# config/_default/config.toml
[module]
  [[module.mounts]]
    source = "node_modules/mermaid"
    target = "assets/mermaid"

[james-d-elliott]

I'm no web expert by any means, but wouldn't setting data-* attributes using the JS which swiches themes then checking this value be a viable method to determine the current theme?

[h-enk]

Yes, presence of the data-dark-mode attribute on the html element could be used for this

[h-enk]

Or, check on the local storage item set:

var theme = (localStorage.getItem('theme') === 'dark') ? "dark" : "default";

[h-enk]

Doks now uses the free Kroki service to render diagrams. See also Diagrams

Unfortunately, Kroki does not "support" dark mode — yet. See also [Feature Request] Setting background color with a diagram option