💄 Add Mermaid theming to match colour scheme

This commit is contained in:
James Panther
2021-10-28 15:01:19 +11:00
parent acbcfacd6f
commit 6d1c51c037
2 changed files with 5 additions and 1 deletions
+4 -1
View File
@@ -108,7 +108,10 @@
<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
mermaid.initialize({ theme: "default" });
function css(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name);
}
mermaid.initialize({ theme: "base", themeVariables: { background: css("--color-neutral"), primaryColor: css("--color-primary-200"), secondaryColor: css("--color-secondary-200"), tertiaryColor: css("--color-neutral-100"), primaryBorderColor: css("--color-primary-400"), secondaryBorderColor: css("--color-secondary-400"), tertiaryBorderColor: css("--color-neutral-400"), lineColor: css("--color-neutral-600"), fontFamily: "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif", fontSize: "16px" }});
});
</script>
{{ end }}