fix(gui): theme the rotating time cursor (it rendered black) - #92
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The bug
The time-scrubber cursor on the rotating spectrogram was always black, so in
dark mode it was essentially invisible against the plot.
Why
The cursor set its colour to
"var(--accent)". Plotly writes shape and tracecolours straight into the SVG, and SVG doesn't resolve CSS custom
properties — so the value was invalid and the browser fell back to black. The
code comment even said "bright turquoise", which was the intent, never what
rendered.
The fix
Use the literal
--accent/--goodvalues per theme, matching how the restof
RotatingTab.tsxalready themes its plot colours (dark ? … : …).While in there I found the same defect twice more in the same view — the
sub-interval Coherence (
var(--good)) and Cross-Power (var(--accent))traces, also rendering black in both themes. Fixed those too rather than
knowingly ship the same bug 60 lines from the one I was fixing.
Only Plotly colours were affected. The remaining
var(--…)uses in this fileare on real DOM elements (
<h4 style=…>etc.), where CSS variables resolvecorrectly — those are left alone.
Verification
Driven in-browser with Playwright against the running app, asserting the
rendered SVG stroke (the thing that was actually wrong):
rgb(46, 230, 207)=#2ee6cfrgb(10, 141, 128)=#0a8d80Never black, and it now follows the theme toggle. eslint +
tsc -b+ 46 vitesttests pass.
🤖 Generated with Claude Code