hugo-theme-hilfe/layouts/shortcodes/mermaid.html

34 lines
1 KiB
HTML
Raw Normal View History

2020-01-12 15:33:02 +01:00
{{ if not (.Page.Scratch.Get "mermaid") }}
2020-01-28 23:17:33 +01:00
<!-- Include mermaid only first time -->
<script defer src="{{ index .Site.Data.assets "js/mermaid.min.js" | relURL }}"></script>
2020-06-01 16:04:18 +02:00
<script>
document.addEventListener("DOMContentLoaded", function(event) {
2021-04-27 23:44:35 +02:00
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;
}
2020-06-01 16:04:18 +02:00
mermaid.initialize({
2021-04-27 23:44:35 +02:00
flowchart: { useMaxWidth: true },
theme: "base",
themeVariables: {
darkMode: darkMode,
primaryColor: primaryColor,
},
2020-06-01 16:04:18 +02:00
});
});
</script>
2020-01-28 23:17:33 +01:00
{{ .Page.Scratch.Set "mermaid" true }}
2020-01-12 15:33:02 +01:00
{{ end }}
2020-06-02 21:22:10 +02:00
<pre class="gdoc-mermaid mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
{{- .Inner -}}
</pre>