[feat](trx-frontend-http): add style picker with Nord, Monokai, Contrast themes
Add a style picker dropdown to the tab bar (right of rig picker) with four styles — Original, Nord, Monokai, Contrast — each with full light/dark variants. CSS: define data-style attribute overrides for all CSS custom properties (bg, card-bg, borders, text, accents, jog, audio level, filter, spectrum background) for each of the three new styles × two themes (6 new blocks). JS: introduce CANVAS_PALETTE lookup table covering spectrum/waveform/ waterfall colors for all style×theme combinations. Add currentStyle(), canvasPalette(), setStyle() helpers. Persist selection to localStorage. Replace all isLight ternaries in drawing code with palette lookups: - drawOverviewWaterfall, drawOverviewSignalHistory, waterfallColor signatures changed from isLight flag to pal object - drawSpectrum uses canvasPalette() for grid lines, labels, fill, line - spectrumBgColor() now delegates to canvasPalette().bg Theme toggle also triggers a spectrum redraw so canvas colors update immediately when switching light/dark. Also fix light-theme spectrum rendering broken since canvas drawing used hardcoded dark-only colors (white grid lines invisible on light bg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
@@ -22,6 +22,14 @@
|
||||
<div class="header-rig-switch">
|
||||
<select id="header-rig-switch-select" aria-label="Select active rig"></select>
|
||||
</div>
|
||||
<div class="header-style-pick">
|
||||
<select id="header-style-pick-select" aria-label="Select UI style">
|
||||
<option value="original">Original</option>
|
||||
<option value="nord">Nord</option>
|
||||
<option value="monokai">Monokai</option>
|
||||
<option value="contrast">Contrast</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
|
||||
<button id="header-auth-btn" class="header-bar-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user