From ffba304c3a966ff609a4821d246be4d502afc6bc Mon Sep 17 00:00:00 2001 From: Matthew Pharr Date: Mon, 27 Jul 2026 13:28:51 -0400 Subject: [PATCH] fix(gui): theme the rotating time cursor (it rendered black) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The cursor line and two sub-interval traces set their colour to "var(--accent)" / "var(--good)". Plotly writes shape and trace colours straight into the SVG, and SVG presentation attributes do NOT resolve CSS custom properties — so the value was invalid and fell back to black, leaving the time cursor near-invisible against the dark spectrogram. Use the literal --accent/--good values per theme, matching how the rest of this file already themes its plot colours (`dark ? … : …`). Also fixes the same defect in the sub-interval Coherence and Cross-Power traces, which are the same bug 60 lines away and were equally black. Only the Plotly colours were affected; the remaining var(--…) uses in this file are on real DOM elements, where CSS variables resolve correctly. Verified in-browser: the cursor's rendered stroke is rgb(46,230,207) in dark and rgb(10,141,128) in light — never black, and it follows the theme. --- gui/web/src/components/tabs/RotatingTab.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/gui/web/src/components/tabs/RotatingTab.tsx b/gui/web/src/components/tabs/RotatingTab.tsx index 4a5b862..6276431 100644 --- a/gui/web/src/components/tabs/RotatingTab.tsx +++ b/gui/web/src/components/tabs/RotatingTab.tsx @@ -799,7 +799,11 @@ export default function RotatingTab({ machine }: { machine: string }) { x1: cursorMs, y1: 1, line: { - color: "var(--accent)", // bright turquoise + // Plotly writes this straight into the SVG `stroke`, which does NOT + // resolve CSS custom properties — "var(--accent)" was invalid there and + // fell back to black, leaving the cursor near-invisible in dark mode. + // Use the literal --accent value for each theme. + color: dark ? "#2ee6cf" : "#0a8d80", width: 2, dash: "dash" as const, }, @@ -848,7 +852,7 @@ export default function RotatingTab({ machine }: { machine: string }) { mode: "lines" as const, x: freqs, y: coh, - line: { color: "var(--good)", width: 1.5 }, + line: { color: dark ? "#54e08a" : "#1f9d57", width: 1.5 }, // --good, literal (see above) name: "Coherence", xaxis: "x", yaxis: "y", @@ -872,7 +876,7 @@ export default function RotatingTab({ machine }: { machine: string }) { mode: "lines" as const, x: freqs, y: power, - line: { color: "var(--accent)", width: 1.5 }, + line: { color: dark ? "#2ee6cf" : "#0a8d80", width: 1.5 }, // --accent, literal (see above) name: "Cross-Power", xaxis: "x", yaxis: "y3",