[feat](trx-frontend): add Neon Disco colour scheme
Deep purple-black backgrounds, neon magenta (#ff10e0) as primary accent and neon green (#39ff14) as secondary. Waterfall sweeps hue 300→120 (magenta→green). Light variant uses muted (#cc00a8 / #1f8800) counterparts on a lavender-tinted white background. - style.css: dark + light CSS variable blocks for neon-disco - app.js: CANVAS_PALETTE entry; "neon-disco" added to valid styles - index.html: Neon Disco option in the style picker Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
@@ -490,6 +490,24 @@ const CANVAS_PALETTE = {
|
|||||||
waterfallHue: [220, 180], waterfallSat: 100, waterfallLight: [90, 42], waterfallAlpha: [0.35, 0.82],
|
waterfallHue: [220, 180], waterfallSat: 100, waterfallLight: [90, 42], waterfallAlpha: [0.35, 0.82],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
"neon-disco": {
|
||||||
|
dark: {
|
||||||
|
bg: "#090010",
|
||||||
|
spectrumLine: "#ff10e0", spectrumFill: "rgba(255,16,224,0.12)",
|
||||||
|
spectrumGrid: "rgba(255,16,224,0.10)", spectrumLabel: "rgba(240,200,255,0.55)",
|
||||||
|
waveformLine: "rgba(57,255,20,0.92)", waveformPeak: "rgba(255,16,224,0.88)",
|
||||||
|
waveformGrid: "rgba(255,16,224,0.10)", waveformLabel: "rgba(240,200,255,0.65)",
|
||||||
|
waterfallHue: [300, 120], waterfallSat: 100, waterfallLight: [8, 55], waterfallAlpha: [0.30, 0.92],
|
||||||
|
},
|
||||||
|
light: {
|
||||||
|
bg: "#f0d8ff",
|
||||||
|
spectrumLine: "#cc00a8", spectrumFill: "rgba(204,0,168,0.12)",
|
||||||
|
spectrumGrid: "rgba(100,0,150,0.10)", spectrumLabel: "rgba(50,0,80,0.55)",
|
||||||
|
waveformLine: "rgba(31,136,0,0.95)", waveformPeak: "rgba(180,0,120,0.9)",
|
||||||
|
waveformGrid: "rgba(50,0,80,0.10)", waveformLabel: "rgba(50,0,80,0.65)",
|
||||||
|
waterfallHue: [300, 120], waterfallSat: 90, waterfallLight: [90, 45], waterfallAlpha: [0.35, 0.80],
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function currentStyle() {
|
function currentStyle() {
|
||||||
@@ -504,7 +522,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"];
|
const valid = ["original", "arctic", "lime", "contrast", "neon-disco"];
|
||||||
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");
|
||||||
|
|||||||
@@ -44,6 +44,7 @@
|
|||||||
<option value="arctic">Arctic</option>
|
<option value="arctic">Arctic</option>
|
||||||
<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>
|
||||||
</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>
|
||||||
|
|||||||
@@ -1827,3 +1827,61 @@ button:focus-visible, input:focus-visible, select:focus-visible {
|
|||||||
--wavelength-fg: #444444;
|
--wavelength-fg: #444444;
|
||||||
--spectrum-bg: #f4f4f4;
|
--spectrum-bg: #f4f4f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Neon Disco style ─────────────────────────────────────────────────── */
|
||||||
|
[data-style="neon-disco"] {
|
||||||
|
--bg: #0d0015;
|
||||||
|
--card-bg: #180026;
|
||||||
|
--input-bg: #100018;
|
||||||
|
--border: #3d0060;
|
||||||
|
--border-light: #7700bb;
|
||||||
|
--text: #f5e0ff;
|
||||||
|
--text-muted: #b070d8;
|
||||||
|
--text-heading: #fce8ff;
|
||||||
|
--btn-bg: #2a0042;
|
||||||
|
--btn-border: #9900dd;
|
||||||
|
--accent-green: #ff10e0;
|
||||||
|
--accent-yellow: #39ff14;
|
||||||
|
--accent-red: #ff1460;
|
||||||
|
--jog-hi: #360058;
|
||||||
|
--jog-lo: #280042;
|
||||||
|
--jog-shadow: rgba(0,0,0,0.65);
|
||||||
|
--jog-inset: rgba(255,16,224,0.08);
|
||||||
|
--audio-level-bg: #180026;
|
||||||
|
--audio-level-border: #7700bb;
|
||||||
|
--audio-level-fill-start: #ff10e0;
|
||||||
|
--audio-level-fill-end: #39ff14;
|
||||||
|
--filter-bg: #2a0042;
|
||||||
|
--filter-fg: #f5e0ff;
|
||||||
|
--filter-border: #9900dd;
|
||||||
|
--wavelength-fg: #9055b8;
|
||||||
|
--spectrum-bg: #090010;
|
||||||
|
}
|
||||||
|
[data-style="neon-disco"][data-theme="light"] {
|
||||||
|
--bg: #faeeff;
|
||||||
|
--card-bg: #fff4ff;
|
||||||
|
--input-bg: #f2e0ff;
|
||||||
|
--border: #dda8f5;
|
||||||
|
--border-light: #cc80e8;
|
||||||
|
--text: #1a0030;
|
||||||
|
--text-muted: #7a30a0;
|
||||||
|
--text-heading: #1a0030;
|
||||||
|
--btn-bg: #f0d8ff;
|
||||||
|
--btn-border: #bb80dd;
|
||||||
|
--accent-green: #cc00a8;
|
||||||
|
--accent-yellow: #1f8800;
|
||||||
|
--accent-red: #cc0044;
|
||||||
|
--jog-hi: #f0d8ff;
|
||||||
|
--jog-lo: #e2c8f5;
|
||||||
|
--jog-shadow: rgba(60,0,100,0.18);
|
||||||
|
--jog-inset: rgba(255,255,255,0.72);
|
||||||
|
--audio-level-bg: #f0d8ff;
|
||||||
|
--audio-level-border: #cc80e8;
|
||||||
|
--audio-level-fill-start: #cc00a8;
|
||||||
|
--audio-level-fill-end: #1f8800;
|
||||||
|
--filter-bg: #f0d8ff;
|
||||||
|
--filter-fg: #1a0030;
|
||||||
|
--filter-border: #bb80dd;
|
||||||
|
--wavelength-fg: #7030a0;
|
||||||
|
--spectrum-bg: #f0d8ff;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user