uci-hugo-doc/layouts/shortcodes/mermaid.html

{{ if not (.Page.Scratch.Get "mermaid") }}
<!-- Include mermaid only first time -->
<script defer src="{{ index .Site.Data.assets "js/mermaid.min.js" | relURL }}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        let currentMode = localStorage.getItem(THEME);
        let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
        let primaryColor = "#ececff";
        let darkMode = false;

        console.log(currentMode)

        if (currentMode === DARK_MODE || (currentMode === AUTO_MODE && darkModeQuery.matches)) {
            primaryColor = "#6C617E";
            darkMode = true;
        }

        mermaid.initialize({
            flowchart: { useMaxWidth: true },
            theme: "base",
            themeVariables: {
                darkMode: darkMode,
                primaryColor: primaryColor,
            },
        });
    });
</script>
{{ .Page.Scratch.Set "mermaid" true }}
{{ end }}

<pre class="gdoc-mermaid mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
  {{- .Inner -}}
</pre>