Commit 516a684 h

Pat Ambrosio · 26-08-28 22:31

Redraw diagrams when the theme changes

Changes: 3 files +111 -10

Changes (Side-by-Side)

Raw

commit 516a6841936f0d6239ed2ed0fa9a3a1033afd965
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Fri Aug 28 22:31:43 2026 +0800

    Redraw diagrams when the theme changes
    
    mermaid resolves the palette into the svg it writes and then replaces the
    source text with that svg. A diagram drawn under one theme therefore kept
    that theme's colours after a switch: dark node fills and near-white
    labels sitting on a white page, because only the CSS variables had
    changed and the rendered svg had not. There is nothing in the finished
    svg to recolour selectively, so the fix is to draw it again.
    
    Three parts. The source is stashed before the first render, since mermaid
    destroys it. The palette is read at call time rather than cached into a
    closure -- a cached getComputedStyle keeps handing back the values from
    first paint, so the redraw would have repainted the old colours. A
    MutationObserver on data-theme, which is what the theme script sets,
    restores the sources and renders again.
    
    Measured in Chrome over four consecutive toggles: node fill tracked the
    theme every time, all three diagrams survived, and the full-screen modal
    still opens and clones the svg in the current theme. The modal's handlers
    sit on the container rather than the svg, so a redraw does not detach
    them.
    
    The selector is bound once to SEL now that three call sites share it. Its
    value is unchanged; a test that pinned the literal at the querySelector
    line follows it to the definition, and still refuses '.diagram-mermaid',
    which is the form that once failed to match 'diagram-mermaid-legend'.

diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index 1b5b78e..5530259 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -116,11 +116,22 @@ diagram_script() {
 	          // The page theme is a CSS custom property set, and mermaid needs
 	          // real values at init. Reading them from the document keeps one
 	          // definition of the palette rather than a second copy here.
-	          var cs = getComputedStyle(document.documentElement);
 	          var v = function(n, fallback) {
-	            var got = cs.getPropertyValue(n);
+	            // Read at call time, not once into a closure: the palette changes
+	            // when the theme does, and a cached getComputedStyle would keep
+	            // handing back the values from first paint.
+	            var got = getComputedStyle(document.documentElement).getPropertyValue(n);
 	            return (got && got.trim()) || fallback;
 	          };
+	          var SEL = '[class*="diagram-mermaid"]';
+	          // mermaid replaces the source text with the svg it renders, so the
+	          // source has to be kept if the diagram is ever to be drawn again.
+	          var sources = [];
+	          document.querySelectorAll(SEL).forEach(function(el, i) {
+	            el.setAttribute('data-diagram-index', i);
+	            sources[i] = el.textContent;
+	          });
+	          var configure = function() {
 	          mermaid.initialize({
 	            // The renderer scans for its own class name, and the parser
 	            // emits a neutral "diagram" class so the markup does not name
@@ -131,7 +142,7 @@ diagram_script() {
 	            // names, so '.diagram-mermaid' never matched
 	            // 'diagram-mermaid-legend' and a legend block sat unrendered,
 	            // showing its own source and overflowing the page by 3px.
-	            querySelector: '[class*="diagram-mermaid"]',
+	            querySelector: SEL,
 	            startOnLoad: false,
 	            securityLevel: 'strict',
 	            theme: 'base',
@@ -144,7 +155,34 @@ diagram_script() {
 	              fontFamily:      'Roboto, sans-serif'
 	            }
 	          });
-	          mermaid.run({ querySelector: '[class*="diagram-mermaid"]' });
+	          };
+	          var render = function() {
+	            configure();
+	            mermaid.run({ querySelector: SEL });
+	          };
+	          render();
+
+	          // mermaid resolves the palette into the svg it writes, so a diagram
+	          // drawn under one theme keeps that theme's colours after a switch:
+	          // dark node fills and pale label text sat on the light background,
+	          // because only the CSS variables had changed and the svg had not.
+	          // Restoring the source and drawing again is the only way to get the
+	          // new palette into it -- there is nothing in the rendered svg to
+	          // recolour selectively.
+	          var rerender = function() {
+	            document.querySelectorAll('[data-diagram-index]').forEach(function(el) {
+	              var i = el.getAttribute('data-diagram-index');
+	              if (sources[i] === undefined) return;
+	              el.removeAttribute('data-processed');
+	              el.textContent = sources[i];
+	            });
+	            render();
+	          };
+	          new MutationObserver(function(records) {
+	            for (var i = 0; i < records.length; i++) {
+	              if (records[i].attributeName === 'data-theme') { rerender(); return; }
+	            }
+	          }).observe(document.documentElement, { attributes: true });
 	        })();
 	      </script>
 	      <script>
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index ebbda04..e917096 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -32,11 +32,22 @@ diagram_script() {
 	          // The page theme is a CSS custom property set, and mermaid needs
 	          // real values at init. Reading them from the document keeps one
 	          // definition of the palette rather than a second copy here.
-	          var cs = getComputedStyle(document.documentElement);
 	          var v = function(n, fallback) {
-	            var got = cs.getPropertyValue(n);
+	            // Read at call time, not once into a closure: the palette changes
+	            // when the theme does, and a cached getComputedStyle would keep
+	            // handing back the values from first paint.
+	            var got = getComputedStyle(document.documentElement).getPropertyValue(n);
 	            return (got && got.trim()) || fallback;
 	          };
+	          var SEL = '[class*="diagram-mermaid"]';
+	          // mermaid replaces the source text with the svg it renders, so the
+	          // source has to be kept if the diagram is ever to be drawn again.
+	          var sources = [];
+	          document.querySelectorAll(SEL).forEach(function(el, i) {
+	            el.setAttribute('data-diagram-index', i);
+	            sources[i] = el.textContent;
+	          });
+	          var configure = function() {
 	          mermaid.initialize({
 	            // The renderer scans for its own class name, and the parser
 	            // emits a neutral "diagram" class so the markup does not name
@@ -47,7 +58,7 @@ diagram_script() {
 	            // names, so '.diagram-mermaid' never matched
 	            // 'diagram-mermaid-legend' and a legend block sat unrendered,
 	            // showing its own source and overflowing the page by 3px.
-	            querySelector: '[class*="diagram-mermaid"]',
+	            querySelector: SEL,
 	            startOnLoad: false,
 	            securityLevel: 'strict',
 	            theme: 'base',
@@ -60,7 +71,34 @@ diagram_script() {
 	              fontFamily:      'Roboto, sans-serif'
 	            }
 	          });
-	          mermaid.run({ querySelector: '[class*="diagram-mermaid"]' });
+	          };
+	          var render = function() {
+	            configure();
+	            mermaid.run({ querySelector: SEL });
+	          };
+	          render();
+
+	          // mermaid resolves the palette into the svg it writes, so a diagram
+	          // drawn under one theme keeps that theme's colours after a switch:
+	          // dark node fills and pale label text sat on the light background,
+	          // because only the CSS variables had changed and the svg had not.
+	          // Restoring the source and drawing again is the only way to get the
+	          // new palette into it -- there is nothing in the rendered svg to
+	          // recolour selectively.
+	          var rerender = function() {
+	            document.querySelectorAll('[data-diagram-index]').forEach(function(el) {
+	              var i = el.getAttribute('data-diagram-index');
+	              if (sources[i] === undefined) return;
+	              el.removeAttribute('data-processed');
+	              el.textContent = sources[i];
+	            });
+	            render();
+	          };
+	          new MutationObserver(function(records) {
+	            for (var i = 0; i < records.length; i++) {
+	              if (records[i].attributeName === 'data-theme') { rerender(); return; }
+	            }
+	          }).observe(document.documentElement, { attributes: true });
 	        })();
 	      </script>
 	      <script>
diff --git a/test/regressions.sh b/test/regressions.sh
index d929380..e520beb 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -1315,8 +1315,12 @@ it "the renderer matches both mermaid dialects"
 # matched 'diagram-mermaid-legend'. A legend block sat unrendered, showing its
 # own source text and pushing the page 3px wider than the viewport -- found
 # when a real document with a legend was published.
-assert_file_contains "$dg/.dist/chart.html" "querySelector: '[class*=\"diagram-mermaid\"]'"
-assert_file_not_contains "$dg/.dist/chart.html" "querySelector: '.diagram-mermaid'"
+# The selector is now bound once to SEL and used for the first render, the
+# redraw after a theme change, and the modal, so the assertion follows it to
+# its definition. The attribute-substring form is what matters, not where the
+# literal sits.
+assert_file_contains "$dg/.dist/chart.html" "var SEL = '[class*=\"diagram-mermaid\"]';"
+assert_file_not_contains "$dg/.dist/chart.html" "var SEL = '.diagram-mermaid';"
 
 it "the renderer is pointed at the class the parser emits"
 # The markup uses a neutral "diagram" class rather than naming one renderer,
@@ -1393,6 +1397,27 @@ it "the body's repeat of the page title carries no rule"
 assert_file_contains "$dg/.dist/chart.html" '.contents h1:not(:is(h1, h2) ~ *)::before { content: none; }'
 assert_file_contains "$dg/.dist/post/charted.html" '.contents h1:not(:is(h1, h2) ~ *)::before { content: none; }'
 
+it "diagram sources are kept so the theme can be changed"
+# mermaid resolves the palette into the svg it writes and then replaces the
+# source text with that svg. A diagram drawn under one theme therefore keeps
+# that theme's colours after a switch -- dark node fills and pale labels on a
+# light page -- because only the CSS variables changed. There is nothing in the
+# rendered svg to recolour selectively, so the source is stashed first and the
+# diagram is drawn again.
+assert_file_contains "$dg/.dist/chart.html" "sources[i] = el.textContent;"
+assert_file_contains "$dg/.dist/post/charted.html" "sources[i] = el.textContent;"
+
+it "a theme change redraws the diagrams"
+# The observer watches data-theme on the root, which is what the theme script
+# sets. Verified in Chrome across four toggles: node fill tracked the theme
+# every time and all three diagrams survived.
+assert_file_contains "$dg/.dist/chart.html" "records[i].attributeName === 'data-theme'"
+
+it "the palette is read at render time, not once at load"
+# getComputedStyle cached into a closure would keep handing back the values
+# from first paint, so the redraw would repaint the diagram in the old colours.
+assert_file_contains "$dg/.dist/chart.html" "getComputedStyle(document.documentElement).getPropertyValue(n)"
+
 it "an unrendered diagram degrades to readable source"
 # If the script is absent or blocked, the element still holds what the author
 # wrote. Shown as the code it is rather than as a paragraph with the newlines