diff --git a/src/main.ts b/src/main.ts
index a1bf9a7..a9beb25 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,7 @@ import { step, place, canPlace, wire, sell, grant, raiseRound, clapBack, shipGra
 import { saveState, loadState, clearSave } from "./sim/save";
 import { DEF } from "./sim/catalog";
 import { Scene } from "./render/scene";
-import { Hud } from "./ui/hud";
+import { Hud, applyTheme, currentTheme } from "./ui/hud";
 import { Panels } from "./ui/panels";
 import { Tutorial } from "./ui/tutorial";
 import { sfx } from "./ui/sfx";
@@ -12,6 +12,7 @@ import { unlockGen, unlockModality, setSpec, setDataSource, unlockRnd, buyUpgrad
 import { DataSource } from "./sim/research";
 
 async function boot() {
+  applyTheme(currentTheme());
   const el = document.getElementById("app")!;
   const loaded = loadState();
   const state = loaded ?? createState();
diff --git a/src/ui/hud.css b/src/ui/hud.css
index f2a2d6d..93c5bea 100644
--- a/src/ui/hud.css
+++ b/src/ui/hud.css
@@ -1,16 +1,97 @@
-:root {
+:root, :root[data-theme="midnight"] {
   --bg: #0b0b12;
   --panel: rgba(16, 16, 26, 0.92);
   --edge: #23233a;
   --text: #e6e6f0;
   --dim: #8a8aa3;
+  --soft: #c9c9dc;
   --purple: #8b5cf6;
   --cyan: #22d3ee;
   --amber: #f59e0b;
   --red: #ef4444;
   --green: #34d399;
+  --chip: #16162a;
+  --chip-on: #221a3a;
+  --card: #12121f;
+  --card-good: #0f2018;
+  --bar-bg: #1c1c2e;
+  --input: #0c0c16;
+  --canvas-bright: 1;
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
 }
+:root[data-theme="contrast"] {
+  --bg: #000000;
+  --panel: rgba(8, 8, 12, 0.97);
+  --edge: #52527a;
+  --text: #ffffff;
+  --dim: #c0c0d4;
+  --soft: #ececf8;
+  --purple: #a78bfa;
+  --cyan: #67e8f9;
+  --amber: #fbbf24;
+  --red: #f87171;
+  --green: #6ee7b7;
+  --chip: #1c1c30;
+  --chip-on: #372560;
+  --card: #16161f;
+  --card-good: #143a26;
+  --bar-bg: #2a2a40;
+  --input: #101018;
+  --canvas-bright: 1.15;
+}
+:root[data-theme="paper"] {
+  --bg: #e8e4da;
+  --panel: rgba(251, 249, 243, 0.96);
+  --edge: #c2bcaa;
+  --text: #1a1a28;
+  --dim: #63637a;
+  --soft: #34344c;
+  --purple: #6d28d9;
+  --cyan: #0e7490;
+  --amber: #b45309;
+  --red: #dc2626;
+  --green: #047857;
+  --chip: #efebe0;
+  --chip-on: #e3daf6;
+  --card: #f5f2e9;
+  --card-good: #ddf0e2;
+  --bar-bg: #d6d1c2;
+  --input: #ffffff;
+  --canvas-bright: 1.22;
+}
+:root[data-theme="crt"] {
+  --bg: #020803;
+  --panel: rgba(3, 16, 6, 0.95);
+  --edge: #1a6b3a;
+  --text: #6ee7a0;
+  --dim: #48a86e;
+  --soft: #8af0b5;
+  --purple: #34d873;
+  --cyan: #4ade80;
+  --amber: #facc15;
+  --red: #f87171;
+  --green: #4ade80;
+  --chip: #052410;
+  --chip-on: #0d4a22;
+  --card: #04180a;
+  --card-good: #0d4a22;
+  --bar-bg: #0c2c16;
+  --input: #031007;
+  --canvas-bright: 1.05;
+}
+
+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); }
+
+/* high-contrast bumps the most-read text sizes */
+:root[data-theme="contrast"] #topbar .stat .val { font-size: 15px; }
+:root[data-theme="contrast"] .chip { font-size: 13px; }
+:root[data-theme="contrast"] .node { font-size: 12.5px; }
+:root[data-theme="contrast"] .node small { font-size: 11.5px; }
+:root[data-theme="contrast"] .tutbody { font-size: 12.5px; }
+:root[data-theme="contrast"] .vid .t { font-size: 11.5px; }
+:root[data-theme="contrast"] #hud { font-size: 13px; }
 * { box-sizing: border-box; }
 #hud { position: fixed; inset: 0; pointer-events: none; color: var(--text); font-size: 12px; }
 #hud .panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; pointer-events: auto; }
@@ -24,7 +105,7 @@
 #topbar .stat .val { font-size: 14px; font-weight: 700; }
 #cash { color: var(--green); font-size: 18px !important; }
 #income.neg, #watts.hot, #temp.hot { color: var(--red); }
-.bar { width: 90px; height: 5px; background: #1c1c2e; border-radius: 3px; overflow: hidden; }
+.bar { width: 90px; height: 5px; background: var(--bar-bg); border-radius: 3px; overflow: hidden; }
 .bar > div { height: 100%; background: var(--amber); width: 0%; transition: width 0.2s; }
 .bar.train > div { background: var(--purple); }
 #breaker-reset {
@@ -35,10 +116,10 @@
 
 #controls { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; padding: 10px; }
 .chip {
-  background: #16162a; border: 1px solid var(--edge); color: var(--dim); border-radius: 6px;
+  background: var(--chip); border: 1px solid var(--edge); color: var(--dim); border-radius: 6px;
   padding: 5px 9px; cursor: pointer; font: inherit; text-align: left;
 }
-.chip.on { color: var(--text); border-color: var(--purple); background: #221a3a; }
+.chip.on { color: var(--text); border-color: var(--purple); background: var(--chip-on); }
 #alloc-row { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
 #alloc { width: 130px; accent-color: var(--purple); }
 
@@ -50,10 +131,10 @@
 .shop-cat { font-size: 9px; color: var(--dim); letter-spacing: 0.2em; margin: 4px 0 -2px; }
 .shop-item {
   display: flex; gap: 8px; align-items: center; border: 1px solid var(--edge); border-radius: 8px;
-  padding: 6px; cursor: pointer; background: #12121f;
+  padding: 6px; cursor: pointer; background: var(--card);
 }
 .shop-item:hover { border-color: var(--cyan); }
-.shop-item.selected { border-color: var(--green); background: #12281f; }
+.shop-item.selected { border-color: var(--green); background: var(--card-good); }
 .shop-item.dim { opacity: 0.45; cursor: default; }
 .shop-item img { width: 40px; height: 40px; object-fit: contain; }
 .shop-item .nm { font-weight: 700; font-size: 11px; }
@@ -76,7 +157,7 @@
 .toast { padding: 8px 14px; border-radius: 8px; font-weight: 700; animation: rise 4s forwards; }
 .toast.bad { background: #3a1214; border: 1px solid var(--red); color: #ffb4b4; }
 .toast.good { background: #12312a; border: 1px solid var(--green); color: #a7f3d0; }
-.toast.info { background: #16162a; border: 1px solid var(--edge); color: var(--dim); }
+.toast.info { background: var(--chip); border: 1px solid var(--edge); color: var(--dim); }
 .toast.rival { background: #251330; border: 1px solid var(--purple); color: #d8b4fe; }
 
 #fxrow { position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
@@ -112,12 +193,12 @@
 .mcols { display: flex; gap: 14px; align-items: flex-start; }
 .mcol { flex: 1; min-width: 0; }
 .mcol h4 { margin: 10px 0 6px; font-size: 10px; color: var(--dim); letter-spacing: 0.15em; }
-.node { display: block; width: 100%; text-align: left; border: 1px solid var(--edge); background: #12121f;
+.node { display: block; width: 100%; text-align: left; border: 1px solid var(--edge); background: var(--card);
   border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; font: inherit; color: var(--text); font-size: 11.5px; font-weight: 700; }
 .node small { display: block; font-weight: 400; color: var(--dim); font-size: 10px; margin-top: 2px; }
 .node.buy { cursor: pointer; }
 .node.buy:hover { border-color: var(--cyan); }
-.node.owned { border-color: var(--green); background: #0f2018; }
+.node.owned { border-color: var(--green); background: var(--card-good); }
 .node.dim { opacity: 0.45; }
 #devpanel { position: absolute; right: 215px; bottom: 12px; width: 250px; max-height: 70vh; overflow-y: auto; padding: 10px; z-index: 40; }
 .gpu-row { display: flex; align-items: center; gap: 7px; }
@@ -136,7 +217,7 @@
 .tutcard.tutdone .tuthead { color: var(--green); }
 .tuthead button { background: none; border: 0; color: var(--dim); cursor: pointer; font: inherit; }
 .tuttitle { font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
-.tutbody { font-size: 11px; line-height: 1.45; color: #c9c9dc; }
+.tutbody { font-size: 11px; line-height: 1.45; color: var(--soft); }
 .tutbody b { color: var(--cyan); }
 .tutskip { background: none; border: 0; color: var(--dim); font: inherit; font-size: 10px;
   cursor: pointer; margin-top: 6px; padding: 0; }
@@ -147,7 +228,7 @@
 #name-box h2 { margin: 0 0 4px; letter-spacing: 0.3em; color: var(--purple); }
 #name-box p { color: var(--dim); margin: 0 0 16px; }
 #name-box .row { display: flex; gap: 6px; margin-bottom: 14px; }
-#name-box input { flex: 1; background: #0c0c16; border: 1px solid var(--edge); color: var(--text); font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 6px; }
-#name-box #reroll { background: #16162a; border: 1px solid var(--edge); border-radius: 6px; font-size: 16px; cursor: pointer; padding: 0 12px; }
+#name-box input { flex: 1; background: var(--input); border: 1px solid var(--edge); color: var(--text); font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 6px; }
+#name-box #reroll { background: var(--chip); border: 1px solid var(--edge); border-radius: 6px; font-size: 16px; cursor: pointer; padding: 0 12px; }
 #name-box #cstart { width: 100%; background: var(--purple); color: #fff; border: 0; border-radius: 8px; padding: 10px; font: inherit; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; }
 #name-box #cstart:hover { filter: brightness(1.15); }
diff --git a/src/ui/hud.ts b/src/ui/hud.ts
index a145c87..33664c8 100644
--- a/src/ui/hud.ts
+++ b/src/ui/hud.ts
@@ -37,6 +37,22 @@ export function randomModelName(): string {
 const fmt = (n: number, d = 2) =>
   n >= 1e6 ? (n / 1e6).toFixed(1) + "M" : n >= 1e3 ? (n / 1e3).toFixed(1) + "K" : n.toFixed(d);
 
+export const THEMES = [
+  { id: "midnight", name: "Midnight" },
+  { id: "contrast", name: "Hi-Contrast" },
+  { id: "paper", name: "Paper" },
+  { id: "crt", name: "CRT" },
+];
+
+export function applyTheme(id: string) {
+  document.documentElement.dataset.theme = THEMES.some((t) => t.id === id) ? id : "midnight";
+  localStorage.setItem("gigaslop-theme", document.documentElement.dataset.theme!);
+}
+
+export function currentTheme(): string {
+  return localStorage.getItem("gigaslop-theme") ?? "midnight";
+}
+
 export class Hud {
   root: HTMLElement;
   cb: HudCallbacks;
@@ -76,6 +92,7 @@ export class Hud {
         <button class="chip" id="rnd-btn">🏢 R&D (R)</button>
         <button class="chip" id="market-btn">📡 Market (M)</button>
         <button class="chip" id="mute">${isMuted() ? "🔇 Muted" : "🔊 Sound"}</button>
+        <button class="chip" id="theme">🎨 ${THEMES.find((t) => t.id === currentTheme())?.name ?? "Midnight"}</button>
         <button class="chip" id="tut-toggle">❓ Tutorial</button>
         <button class="chip" id="new-game">🗑 New Game</button>
         <button class="chip" id="raise" style="display:none">💰 Raise</button>
@@ -112,6 +129,14 @@ export class Hud {
       muteBtn.textContent = isMuted() ? "🔇 Muted" : "🔊 Sound";
       if (!isMuted()) sfx.click();
     };
+    const themeBtn = this.root.querySelector("#theme") as HTMLButtonElement;
+    themeBtn.onclick = () => {
+      const i = THEMES.findIndex((t) => t.id === currentTheme());
+      const next = THEMES[(i + 1) % THEMES.length];
+      applyTheme(next.id);
+      themeBtn.textContent = `🎨 ${next.name}`;
+      sfx.click();
+    };
     (this.root.querySelector("#new-game") as HTMLButtonElement).onclick = () => {
       if (confirm("Torch the whole company and start over?")) cb.onNewGame();
     };