Mermaid: read theme variables instead of hardcoded gruvbox colors; drop legacy gruvbox mermaid css snippet

scripts/note_fallback.js

@@ -79,31 +79,29 @@
         (nativeDetails || nativePre).replaceWith(wrapper);
         applyHighlight(code);
 
-        var MMD_DARK = {
+        function mermaidTheme() {
-            background: "transparent",
+            var cs = getComputedStyle(document.documentElement);
-            textColor: "#ebdbb2",
+            function v(n, fb) { return (cs.getPropertyValue(n) || "").trim() || fb; }
-            titleColor: "#fbf1c7",
+            return {
-            lineColor: "#a89984",
+                background: "transparent",
-            edgeLabelBackground: "#3c3836",
+                textColor: v("--text-primary", "#c0caf5"),
-            nodeTextColor: "#fbf1c7",
+                titleColor: v("--text-heading", "#c0caf5"),
-            primaryColor: "#458588", primaryTextColor: "#fbf1c7", primaryBorderColor: "#458588",
+                lineColor: v("--text-menu", "#9ece6a"),
-            secondaryColor: "#b8bb26", secondaryTextColor: "#1d2021", secondaryBorderColor: "#b8bb26",
+                edgeLabelBackground: v("--background-secondary", "#1a1b26"),
-            tertiaryColor: "#d3869b", tertiaryTextColor: "#1d2021", tertiaryBorderColor: "#d3869b"
+                nodeTextColor: v("--text-heading", "#c0caf5"),
-        };
+                primaryColor: v("--background-active", "#7aa2f7"),
-        var MMD_LIGHT = {
+                primaryTextColor: v("--text-menu-active", "#24283b"),
-            background: "transparent",
+                primaryBorderColor: v("--background-active", "#7aa2f7"),
-            textColor: "#3c3836",
+                secondaryColor: v("--background-highlight", "#292e42"),
-            titleColor: "#282828",
+                secondaryTextColor: v("--text-primary", "#c0caf5"),
-            lineColor: "#928374",
+                secondaryBorderColor: v("--background-highlight", "#292e42"),
-            edgeLabelBackground: "#ebdbb2",
+                tertiaryColor: v("--text-link", "#7aa2f7"),
-            nodeTextColor: "#1d2021",
+                tertiaryTextColor: v("--text-menu-active", "#24283b"),
-            primaryColor: "#83a598", primaryTextColor: "#1d2021", primaryBorderColor: "#076678",
+                tertiaryBorderColor: v("--text-link", "#7aa2f7")
-            secondaryColor: "#98971a", secondaryTextColor: "#fbf1c7", secondaryBorderColor: "#79740e",
+            };
-            tertiaryColor: "#b16286", tertiaryTextColor: "#fbf1c7", tertiaryBorderColor: "#8f3f71"
+        }
-        };
         function mermaidConfig() {
-            var light = document.documentElement.classList.contains("theme-light");
+            return { startOnLoad: false, theme: "base", themeVariables: mermaidTheme() };
-            return { startOnLoad: false, theme: "base", themeVariables: light ? MMD_LIGHT : MMD_DARK };
         }
         function renderMermaid() {
             import("/assets/mermaid.core-BUJU3YJZ.js").then(function (mod) {