{{ 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>