From 7ddd1b68d7d1c4fa7dbfe3c107e8ca1ac0da895f Mon Sep 17 00:00:00 2001
From: type-two <minimus.hargroove@gmail.com>
Date: Sat, 1 Aug 2026 23:52:34 +1000
Subject: [PATCH] Vaporwave theme: sunset gradient, hot pink, vapor cyan, mint
 money
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fifth theme in the cycle — panels glow pink, stat values get a cyan
halo, the canvas runs saturated with a slight hue shift, and the page
behind it all is a proper purple-to-sunset gradient.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/ui/hud.css | 24 ++++++++++++++++++++++++
 src/ui/hud.ts  |  1 +
 2 files changed, 25 insertions(+)

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) {