hugo-theme-hilfe/layouts/shortcodes/mermaid.html
2021-04-27 23:44:35 +02:00

33 lines
1 KiB
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>