diff --git a/src/ui/hud.css b/src/ui/hud.css index 93c5bea..fb63d32 100644 --- a/src/ui/hud.css +++ b/src/ui/hud.css @@ -80,9 +80,33 @@ --canvas-bright: 1.05; } +:root[data-theme="vapor"] { + --bg: linear-gradient(180deg, #16063a 0%, #45156b 38%, #c33168 70%, #ff9a76 100%); + --panel: rgba(28, 9, 52, 0.88); + --edge: #83308f; + --text: #ffe9f7; + --dim: #c79bd8; + --soft: #ffd6ef; + --purple: #b967ff; + --cyan: #01cdfe; + --amber: #ffb96b; + --red: #ff5e78; + --green: #05ffa1; + --chip: #2d1250; + --chip-on: #55207d; + --card: #271046; + --card-good: #0d3d3a; + --bar-bg: #3b1b63; + --input: #1c0a35; + --canvas-bright: 1.08; +} + body { background: var(--bg); } #app canvas { filter: brightness(var(--canvas-bright)); } :root[data-theme="crt"] #hud { text-shadow: 0 0 6px rgba(74, 222, 128, 0.3); } +:root[data-theme="vapor"] #app canvas { filter: brightness(1.08) saturate(1.3) hue-rotate(-6deg); } +:root[data-theme="vapor"] #hud .panel { box-shadow: 0 0 20px rgba(255, 110, 199, 0.14); } +:root[data-theme="vapor"] #topbar .stat .val { text-shadow: 0 0 8px rgba(1, 205, 254, 0.35); } /* high-contrast bumps the most-read text sizes */ :root[data-theme="contrast"] #topbar .stat .val { font-size: 15px; } diff --git a/src/ui/hud.ts b/src/ui/hud.ts index 33664c8..0c717c4 100644 --- a/src/ui/hud.ts +++ b/src/ui/hud.ts @@ -42,6 +42,7 @@ export const THEMES = [ { id: "contrast", name: "Hi-Contrast" }, { id: "paper", name: "Paper" }, { id: "crt", name: "CRT" }, + { id: "vapor", name: "Vaporwave" }, ]; export function applyTheme(id: string) {