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

Co-authored-by: OpenAI Codex <codex@openai.com> Signed-off-by: Stan Grams <sjg@haxx.space>
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],
    },
  },
+  "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() {
@@ -522,7 +540,7 @@ function canvasPalette() {

 function setStyle(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";
  if (next === "original") {
    document.documentElement.removeAttribute("data-style");
@@ -45,6 +45,7 @@
            <option value="lime">Lime</option>
            <option value="contrast">Contrast</option>
            <option value="neon-disco">Neon Disco</option>
+            <option value="golden-rain">Golden Rain</option>
          </select>
        </div>
        <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);
  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;
+}