[style](trx-frontend): add golden rain theme

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-01 19:42:09 +01:00
parent 587b06c6d8
commit 473bbb280a
3 changed files with 78 additions and 1 deletions
@@ -508,6 +508,24 @@ const CANVAS_PALETTE = {
waterfallHue: [300, 120], waterfallSat: 90, waterfallLight: [90, 45], waterfallAlpha: [0.35, 0.80], waterfallHue: [300, 120], waterfallSat: 90, waterfallLight: [90, 45], waterfallAlpha: [0.35, 0.80],
}, },
}, },
"golden-rain": {
dark: {
bg: "#120d07",
spectrumLine: "#e4b24d", spectrumFill: "rgba(228,178,77,0.11)",
spectrumGrid: "rgba(255,229,172,0.07)", spectrumLabel: "rgba(230,205,152,0.54)",
waveformLine: "rgba(236,199,108,0.92)", waveformPeak: "rgba(214,134,44,0.90)",
waveformGrid: "rgba(255,210,120,0.09)", waveformLabel: "rgba(232,214,174,0.66)",
waterfallHue: [40, 18], waterfallSat: 88, waterfallLight: [8, 58], waterfallAlpha: [0.26, 0.84],
},
light: {
bg: "#f5ecd9",
spectrumLine: "#9e6700", spectrumFill: "rgba(158,103,0,0.12)",
spectrumGrid: "rgba(82,55,14,0.09)", spectrumLabel: "rgba(82,55,14,0.55)",
waveformLine: "rgba(140,92,0,0.94)", waveformPeak: "rgba(191,86,0,0.90)",
waveformGrid: "rgba(82,55,14,0.11)", waveformLabel: "rgba(82,55,14,0.66)",
waterfallHue: [45, 18], waterfallSat: 86, waterfallLight: [92, 42], waterfallAlpha: [0.34, 0.82],
},
},
}; };
function currentStyle() { function currentStyle() {
@@ -522,7 +540,7 @@ function canvasPalette() {
function setStyle(style) { function setStyle(style) {
const remapped = style === "nord" ? "arctic" : style === "monokai" ? "lime" : style; const remapped = style === "nord" ? "arctic" : style === "monokai" ? "lime" : style;
const valid = ["original", "arctic", "lime", "contrast", "neon-disco"]; const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain"];
const next = valid.includes(remapped) ? remapped : "original"; const next = valid.includes(remapped) ? remapped : "original";
if (next === "original") { if (next === "original") {
document.documentElement.removeAttribute("data-style"); document.documentElement.removeAttribute("data-style");
@@ -45,6 +45,7 @@
<option value="lime">Lime</option> <option value="lime">Lime</option>
<option value="contrast">Contrast</option> <option value="contrast">Contrast</option>
<option value="neon-disco">Neon Disco</option> <option value="neon-disco">Neon Disco</option>
<option value="golden-rain">Golden Rain</option>
</select> </select>
</div> </div>
<button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button> <button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
@@ -2101,3 +2101,61 @@ button:focus-visible, input:focus-visible, select:focus-visible {
color: var(--text-muted); color: var(--text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
/* ── Golden Rain style ────────────────────────────────────────────────── */
[data-style="golden-rain"] {
--bg: #100c06;
--card-bg: #1a1209;
--input-bg: #140f08;
--border: #3f2d18;
--border-light: #6d4e23;
--text: #f3e4bf;
--text-muted: #aa9062;
--text-heading: #fff0ca;
--btn-bg: #2a1c0d;
--btn-border: #7c5928;
--accent-green: #dfac48;
--accent-yellow: #f4cd74;
--accent-red: #cf7d32;
--jog-hi: #392610;
--jog-lo: #24170b;
--jog-shadow: rgba(0,0,0,0.64);
--jog-inset: rgba(255,219,138,0.06);
--audio-level-bg: #1c130a;
--audio-level-border: #6d4e23;
--audio-level-fill-start: #dfac48;
--audio-level-fill-end: #f4cd74;
--filter-bg: #2b1d0f;
--filter-fg: #f3e4bf;
--filter-border: #7c5928;
--wavelength-fg: #ab8b52;
--spectrum-bg: #120d07;
}
[data-style="golden-rain"][data-theme="light"] {
--bg: #f7efdd;
--card-bg: #fff9ec;
--input-bg: #f0e3c6;
--border: #d4bc8a;
--border-light: #b99243;
--text: #3f2c10;
--text-muted: #7f6640;
--text-heading: #3a2609;
--btn-bg: #f0e3c6;
--btn-border: #b99243;
--accent-green: #a96d00;
--accent-yellow: #c88a16;
--accent-red: #b65316;
--jog-hi: #f2e5c8;
--jog-lo: #e3d1a8;
--jog-shadow: rgba(82,55,14,0.16);
--jog-inset: rgba(255,255,255,0.76);
--audio-level-bg: #f0e3c6;
--audio-level-border: #c5a15d;
--audio-level-fill-start: #a96d00;
--audio-level-fill-end: #d4a13a;
--filter-bg: #f0e3c6;
--filter-fg: #3f2c10;
--filter-border: #b99243;
--wavelength-fg: #87663a;
--spectrum-bg: #f5ecd9;
}