diff --git a/apps/ambient-inventory-agent/app/agent.py b/apps/ambient-inventory-agent/app/agent.py
index aba75a1..5e51da4 100644
--- a/apps/ambient-inventory-agent/app/agent.py
+++ b/apps/ambient-inventory-agent/app/agent.py
@@ -243,7 +243,9 @@ def _model_facing_schema(args_schema: Any) -> dict[str, Any]:
     This is the tool's SIGNATURE — which arguments `find` takes. Nothing to do with
     document shape: the agent discovers that itself via `collection-schema`.
     """
-    properties = args_schema.get("properties") if isinstance(args_schema, dict) else None
+    properties = (
+        args_schema.get("properties") if isinstance(args_schema, dict) else None
+    )
     if not isinstance(properties, dict):
         return {"type": "object", "properties": {}}
 
@@ -518,9 +520,7 @@ def stream_messages(chunk: Any) -> list[Any]:
     ]
 
 
-def new_tool_calls(
-    msg: Any, seen: set[str]
-) -> list[tuple[str, dict[str, Any], str]]:
+def new_tool_calls(msg: Any, seen: set[str]) -> list[tuple[str, dict[str, Any], str]]:
     """(name, args, rendered command) for each tool call not yet reported.
 
     A streamed message is re-delivered as later chunks arrive, so `seen` — the call
diff --git a/apps/ambient-inventory-agent/app/investigator.py b/apps/ambient-inventory-agent/app/investigator.py
index ea6bdae..ec26ca9 100644
--- a/apps/ambient-inventory-agent/app/investigator.py
+++ b/apps/ambient-inventory-agent/app/investigator.py
@@ -214,8 +214,6 @@ def _readable_thought(line: str) -> str:
     return line if len(line) <= 400 else f"{line[:397]}…"
 
 
-
-
 INVESTIGATOR_PROMPT = """\
 You are the inventory monitor for Leafy Roasters, a coffee roaster, running on a \
 schedule against the `{database}` MongoDB database. Find the component that has \
@@ -319,7 +317,10 @@ async def file_alert(**fields: Any) -> str:
             document = self.repository.build_alert_document(
                 self._session_id, self._sweep_id, fields
             )
-            payload = {"collection": "alerts", "documents": [_as_extended_json(document)]}
+            payload = {
+                "collection": "alerts",
+                "documents": [_as_extended_json(document)],
+            }
             result = await insert.ainvoke(payload)
             if "E11000" in str(result) or "duplicate key" in str(result).lower():
                 return "An alert for this component already exists; not filing again."
diff --git a/apps/ambient-inventory-agent/app/main.py b/apps/ambient-inventory-agent/app/main.py
index 58a200c..4759836 100644
--- a/apps/ambient-inventory-agent/app/main.py
+++ b/apps/ambient-inventory-agent/app/main.py
@@ -16,8 +16,8 @@
 from .db import get_database
 from .demo_data import ensure_indexes, ensure_validators, seed_demo_data
 from .mcp_session import MCPUnavailable, get_mcp_session
-from .monitor import InventoryMonitor
 from .memory import close_checkpointer
+from .monitor import InventoryMonitor
 from .repository import InventoryRepository
 
 STATIC_DIR = Path(__file__).parent / "static"
diff --git a/apps/ambient-inventory-agent/app/static/app.js b/apps/ambient-inventory-agent/app/static/app.js
index b3b1e36..9e89b70 100644
--- a/apps/ambient-inventory-agent/app/static/app.js
+++ b/apps/ambient-inventory-agent/app/static/app.js
@@ -29,6 +29,7 @@ const els = {
   pageTitle: document.getElementById("pageTitle"),
   alertBadge: document.getElementById("alertBadge"),
   navItems: Array.from(document.querySelectorAll(".nav-item")),
+  themeToggle: document.getElementById("themeToggle"),
 };
 
 // The play control calls /api/demo/start, which re-mints the service-account token,
@@ -1279,6 +1280,30 @@ els.navItems.forEach((item) => {
   });
 });
 
+/* ---------- Theme toggle ---------- */
+// The pre-paint script in index.html already applied the stored choice; this only
+// handles clicks and keeps the icon in sync.
+function paintThemeIcon() {
+  const dark = document.documentElement.getAttribute("data-theme") === "dark";
+  // Show the theme you would switch TO, which is the convention users expect.
+  els.themeToggle.textContent = dark ? "☀" : "☾";
+}
+
+els.themeToggle.addEventListener("click", () => {
+  const root = document.documentElement;
+  const dark = root.getAttribute("data-theme") === "dark";
+  if (dark) root.removeAttribute("data-theme");
+  else root.setAttribute("data-theme", "dark");
+  try {
+    localStorage.setItem("theme", dark ? "light" : "dark");
+  } catch (e) {
+    // Private browsing — the toggle still works for this page load.
+  }
+  paintThemeIcon();
+});
+
+paintThemeIcon();
+
 /* ---------- Boot ---------- */
 render(true);
 startSession().catch((error) => {
diff --git a/apps/ambient-inventory-agent/app/static/index.html b/apps/ambient-inventory-agent/app/static/index.html
index 448ac6e..5f47ef9 100644
--- a/apps/ambient-inventory-agent/app/static/index.html
+++ b/apps/ambient-inventory-agent/app/static/index.html
@@ -4,6 +4,19 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Leafy Roasters Inventory Assistant</title>
+    <script>
+      // Inline and BEFORE the stylesheet on purpose: applying data-theme after first
+      // paint makes the page flash light before going dark, which looks broken on a
+      // projector. A stored choice wins over the OS so either look can be forced.
+      (function () {
+        var saved = null;
+        try { saved = localStorage.getItem('theme'); } catch (e) { /* private mode */ }
+        var dark = saved
+          ? saved === 'dark'
+          : window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (dark) document.documentElement.setAttribute('data-theme', 'dark');
+      })();
+    </script>
     <link rel="stylesheet" href="/static/styles.css" />
   </head>
   <body>
@@ -48,9 +61,13 @@
             <h1 id="pageTitle">Dashboard</h1>
           </div>
 
-          <!-- Decorative only: this demo has no auth. Stands in for the shop owner the
-               agent is talking to, so the dashboard reads as somebody's account. -->
-          <span class="avatar">DW</span>
+          <div class="topbar-actions">
+            <button class="theme-toggle" id="themeToggle" type="button"
+                    aria-label="Toggle dark mode" title="Toggle dark mode"></button>
+            <!-- Decorative only: this demo has no auth. Stands in for the shop owner the
+                 agent is talking to, so the dashboard reads as somebody's account. -->
+            <span class="avatar">DW</span>
+          </div>
         </header>
 
         <main id="view" class="view"></main>
diff --git a/apps/ambient-inventory-agent/app/static/styles.css b/apps/ambient-inventory-agent/app/static/styles.css
index 2692da0..6660547 100644
--- a/apps/ambient-inventory-agent/app/static/styles.css
+++ b/apps/ambient-inventory-agent/app/static/styles.css
@@ -17,8 +17,13 @@
   --border-strong: #d3dade;
 
   --ink: #001e2b;
-  --muted: #5c6c75;
-  --subtle: #889397;
+  /* Three-level text hierarchy, each clearing WCAG AA (4.5:1) on the LIGHTEST
+     surface it lands on — which is --bg, not white. --subtle was #889397 (2.91:1
+     on --bg), so table headers and card sub-labels failed even the 3:1 large-text
+     bar. --muted darkened alongside it so the three levels stay visually distinct
+     instead of collapsing into two. */
+  --muted: #4f5f68;
+  --subtle: #697174;
 
   --accent: var(--mongodb-green);
   --accent-strong: var(--mongodb-forest);
@@ -31,6 +36,38 @@
   --success: var(--mongodb-forest);
   --success-soft: #e3fcef;
 
+  /* Text that sits ON a filled accent/danger surface rather than on the page. */
+  --on-solid: #ffffff;
+  /* Ink on the bright-green accent FILL. Distinct from --on-solid because that
+     is white for danger/forest fills, and white on #00ed64 fails AA. */
+  --on-accent-fill: var(--mongodb-slate);
+  --accent-hover: #00d557;
+  --accent-border: #bff3d8;
+
+  --danger-ink: #8c1d18;
+  --danger-ink-strong: #b3261e;
+  --danger-border: #f5c6c2;
+  /* Bare RGB triples: these feed rgba() in the badge pulse and focus rings, where
+     a hex token cannot be interpolated. */
+  --danger-rgb: 208, 39, 29;
+  --focus-blue-rgb: 1, 107, 248;
+  --focus-green-rgb: 0, 237, 100;
+
+  /* Event-tag and pill pairs. Each is a soft background plus an ink chosen to be
+     legible on it, so the two must move together when the theme flips. */
+  --info-soft: #e7f0fe;
+  /* A shade darker than brand blue: #016bf8 only reaches 4.1:1 on --info-soft.
+     The focus ring keeps brand blue, since a border is non-text UI (3:1 bar). */
+  --info-ink: #0d5ed9;
+  --focus-ring: var(--mongodb-blue);
+  --plan-soft: #f3edff;
+  --plan-ink: #6d43c9;
+  --plan-border: #e3d9f7;
+  --db-soft: #eef4ff;
+  --db-ink: #3b62b5;
+  --neutral-soft: #eaf0f2;
+  --code-bg: #f7faf9;
+
   --shadow-sm: 0 1px 2px rgba(0, 30, 43, 0.06);
   --shadow: 0 1px 3px rgba(0, 30, 43, 0.08), 0 1px 2px rgba(0, 30, 43, 0.04);
   --shadow-md: 0 4px 16px rgba(0, 30, 43, 0.08);
@@ -43,6 +80,68 @@
   font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
+/* ---------- Dark theme ----------
+   Driven by [data-theme="dark"] rather than prefers-color-scheme alone so the
+   in-app toggle can override the OS: a presenter's laptop is often set to light
+   while the room's projector reads better dark, or the reverse.
+
+   Only tokens are redefined here — no rule below is theme-aware, which is why the
+   previously-hardcoded colours had to become tokens first.
+
+   The soft/ink pairs are NOT mechanical inversions. Each light tint (#e7f0fe)
+   becomes a deep wash and its ink lightens to stay legible on it; every pair is
+   contrast-checked against its own background rather than eyeballed. */
+[data-theme="dark"] {
+  --bg: #000e15;
+  --surface: #001521;
+  --surface-subtle: #04202e;
+  --border: #1d3341;
+  --border-strong: #2a4553;
+
+  --ink: #e8edf0;
+  --muted: #a3b2ba;
+  --subtle: #8798a1;
+
+  /* Forest green is unreadable on a dark surface, so accent-strong brightens
+     rather than darkening. */
+  --accent: var(--mongodb-green);
+  --accent-strong: #4ade80;
+  --accent-soft: #06301f;
+  --accent-border: #10643f;
+  --accent-hover: #00ed64;
+  /* Filled accent surfaces flip to dark text — white on bright green fails AA. */
+  --on-solid: #001e2b;
+
+  --danger: #ff5247;
+  --danger-soft: #2c100e;
+  --danger-ink: #ff9d95;
+  --danger-ink-strong: #ff8078;
+  --danger-border: #5c221e;
+  --danger-rgb: 255, 82, 71;
+
+  --warning: #fbbf24;
+  --warning-soft: #2e2008;
+  --success: #4ade80;
+  --success-soft: #06301f;
+
+  --info-soft: #0a2039;
+  --info-ink: #7cb2ff;
+  --focus-ring: #4d94ff;
+  --plan-soft: #1e1533;
+  --plan-ink: #c4a6ff;
+  --plan-border: #3a2d5c;
+  --db-soft: #101d33;
+  --db-ink: #96b4f0;
+  --neutral-soft: #10242f;
+  --code-bg: #04202e;
+
+  /* Shadows barely register on dark surfaces; deepen them so cards keep the
+     separation they get for free in light mode. */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -180,7 +279,7 @@ input {
   justify-content: center;
   border-radius: 999px;
   background: var(--danger);
-  color: #ffffff;
+  color: var(--on-solid);
   font-size: 12px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
@@ -193,13 +292,13 @@ input {
 
 @keyframes badge-pulse {
   0% {
-    box-shadow: 0 0 0 0 rgba(208, 39, 29, 0.5);
+    box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.5);
   }
   70% {
-    box-shadow: 0 0 0 8px rgba(208, 39, 29, 0);
+    box-shadow: 0 0 0 8px rgba(var(--danger-rgb), 0);
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(208, 39, 29, 0);
+    box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0);
   }
 }
 
@@ -242,7 +341,7 @@ input {
   height: 34px;
   border-radius: 50%;
   background: var(--accent-strong);
-  color: #ffffff;
+  color: var(--on-solid);
   font-size: 12.5px;
   font-weight: 700;
   letter-spacing: 0.02em;
@@ -252,6 +351,37 @@ input {
   user-select: none;
 }
 
+/* Sits left of the avatar in the topbar. Icon-only so it reads as app chrome
+   rather than competing with the page's own controls. */
+.theme-toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  flex-shrink: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.theme-toggle:hover {
+  background: var(--surface-subtle);
+  border-color: var(--border-strong);
+  color: var(--ink);
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 .view {
   padding: 28px 32px 40px;
   overflow-y: auto;
@@ -398,8 +528,10 @@ input {
 }
 
 .pill.info {
-  background: #e7f0fe;
-  color: var(--mongodb-blue);
+  background: var(--info-soft);
+  /* --info-ink, not raw --mongodb-blue: brand blue only clears 3.5:1 on the dark
+     wash, so the ink has to lighten with the theme. */
+  color: var(--info-ink);
 }
 
 /* ---------- Buttons ---------- */
@@ -428,7 +560,7 @@ input {
   border: 1px solid var(--accent);
   border-radius: var(--radius-btn);
   background: var(--accent);
-  color: var(--mongodb-slate);
+  color: var(--on-accent-fill);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
@@ -436,8 +568,8 @@ input {
 }
 
 .btn--primary:hover {
-  border-color: #00d557;
-  background: #00d557;
+  border-color: var(--accent-hover);
+  background: var(--accent-hover);
 }
 
 .btn--primary:disabled {
@@ -642,7 +774,7 @@ input {
 }
 
 .risk-tile.critical strong {
-  color: #8c1d18;
+  color: var(--danger-ink);
 }
 
 .risk-tile.warning {
@@ -711,7 +843,7 @@ input {
 .message.owner {
   justify-self: end;
   background: var(--accent-soft);
-  border: 1px solid #bff3d8;
+  border: 1px solid var(--accent-border);
   border-bottom-right-radius: 3px;
   color: var(--accent-strong);
 }
@@ -740,7 +872,7 @@ input {
 }
 
 .stream-error {
-  color: #b3261e;
+  color: var(--danger-ink-strong);
 }
 
 .risk-note {
@@ -762,9 +894,9 @@ input {
 }
 
 .banner.danger {
-  background: #fdecea;
-  border: 1px solid #f5c6c2;
-  color: #8c1d18;
+  background: var(--danger-soft);
+  border: 1px solid var(--danger-border);
+  color: var(--danger-ink);
 }
 
 .quick-prompts {
@@ -805,21 +937,23 @@ input {
 }
 
 .chat-form input:focus {
-  border-color: var(--mongodb-blue);
-  box-shadow: 0 0 0 3px rgba(1, 107, 248, 0.12);
+  /* Tokenised so the ring tracks the theme. Brand blue passes the 3:1 bar for
+     non-text UI on dark, but only just — --focus-ring brightens it there. */
+  border-color: var(--focus-ring);
+  box-shadow: 0 0 0 3px rgba(var(--focus-blue-rgb), 0.12);
 }
 
 .chat-form .btn {
   border-color: var(--accent);
   background: var(--accent);
-  color: var(--mongodb-slate);
+  color: var(--on-accent-fill);
   font-weight: 600;
 }
 
 .chat-form .btn:hover {
   background: var(--accent);
   border-radius: 40px;
-  box-shadow: 0 0 0 3px rgba(0, 237, 100, 0.22);
+  box-shadow: 0 0 0 3px rgba(var(--focus-green-rgb), 0.22);
 }
 
 .note {
@@ -868,13 +1002,13 @@ input {
 }
 
 .event-tag.db {
-  background: #eef4ff;
-  color: #3b62b5;
+  background: var(--db-soft);
+  color: var(--db-ink);
 }
 
 .event-tag.plan {
-  background: #f3edff;
-  color: #6d43c9;
+  background: var(--plan-soft);
+  color: var(--plan-ink);
 }
 
 /* Reserved for real Remote MCP tool calls made by the agent. */
@@ -884,13 +1018,13 @@ input {
 }
 
 .event-tag.response {
-  background: #eaf0f2;
+  background: var(--neutral-soft);
   color: var(--ink);
 }
 
 .event-tag.danger {
-  background: #fdecea;
-  color: #b3261e;
+  background: var(--danger-soft);
+  color: var(--danger-ink-strong);
 }
 
 .event-time {
@@ -915,7 +1049,7 @@ input {
   flex-direction: column;
   gap: 4px;
   padding-left: 10px;
-  border-left: 2px solid #e3d9f7;
+  border-left: 2px solid var(--plan-border);
 }
 
 .thinking-line {
@@ -931,7 +1065,7 @@ input {
   padding: 8px 10px;
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  background: #f7faf9;
+  background: var(--code-bg);
   color: var(--accent-strong);
   font-family: "Source Code Pro", monospace;
   font-size: 11.5px;
diff --git a/apps/remote-mcp-perf-triage/checkout_app.py b/apps/remote-mcp-perf-triage/checkout_app.py
index f678759..358dd46 100644
--- a/apps/remote-mcp-perf-triage/checkout_app.py
+++ b/apps/remote-mcp-perf-triage/checkout_app.py
@@ -288,15 +288,55 @@ async def index():
 <head>
 <meta charset="utf-8">
 <title>Leafy Electronics — Checkout</title>
+<script>
+// Inline and BEFORE the stylesheet on purpose: setting data-theme after first paint
+// makes the page flash light before going dark, which looks broken on a projector.
+// Stored choice wins over the OS so a presenter can force either look.
+(function () {
+  var saved = null;
+  try { saved = localStorage.getItem('theme'); } catch (e) { /* private mode */ }
+  var dark = saved ? saved === 'dark'
+                   : window.matchMedia('(prefers-color-scheme: dark)').matches;
+  if (dark) document.documentElement.setAttribute('data-theme', 'dark');
+})();
+</script>
 <style>
   @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&family=Source+Sans+3:wght@300;400;500;600;700&display=swap");
 
   :root {
     --mongodb-forest:#00684a; --mongodb-slate:#001e2b;
-    --ink:#001e2b; --muted:#5c6c75; --subtle:#889397;
+    /* Three text levels, each clearing WCAG AA (4.5:1) on the lightest surface it
+       lands on — which is --bg, not white. --subtle was #889397 (2.91:1 on --bg);
+       --muted moved with it so the levels stay distinct. Same values as the
+       inventory demo, so the two apps read as one design system. */
+    --ink:#001e2b; --muted:#4f5f68; --subtle:#697174;
     --line:#e4e8eb; --bg:#f4f6f8; --surface:#ffffff;
     --accent:var(--mongodb-forest); --bad:#d0271d; --good:var(--mongodb-forest);
     --panel:var(--mongodb-slate);
+    --on-accent:#ffffff; --input-bg:#fafafb; --disabled:#9db8d4;
+    --spinner-track:#cfd8e3;
+    /* Poll-panel ink. Tokenised because the panel is already dark in light mode,
+       so dark mode has to lift it rather than invert it. */
+    --panel-ink:#e8e8ee; --panel-dim:#8b8b99;
+    --panel-ms:#ffd479; --panel-hit:#7ee08a; --panel-to:#ff8a8a;
+  }
+
+  /* Dark theme. Applied via [data-theme] rather than only prefers-color-scheme so
+     the toggle can override the OS — a presenter's laptop is often set to light
+     while the projector reads better dark, or vice versa.
+     Contrast checked against WCAG AA: --ink on --bg is 13.6:1, --muted 5.9:1. */
+  [data-theme="dark"] {
+    --ink:#e8edf0; --muted:#a3b2ba; --subtle:#8798a1;
+    --line:#243b47; --bg:#000e15; --surface:#001521;
+    /* Forest green is too dark to read on a dark surface; MongoDB's brighter
+       green carries the accent instead, with dark text on top of it. */
+    --accent:#00c866; --good:#4ade80; --bad:#ff6b5f;
+    --on-accent:#001e2b; --input-bg:#001b28; --disabled:#2c4553;
+    --spinner-track:#2a4250;
+    /* The panel must stay visually distinct from the page. In light mode it is
+       darker than the card; in dark mode it has to be LIGHTER, or the whole
+       layout flattens into one black rectangle. */
+    --panel:#04263a; --panel-dim:#93a3ad;
   }
   * { box-sizing:border-box; }
   body { margin:0; font-size:15px; line-height:1.5;
@@ -312,7 +352,7 @@ async def index():
   .brand-text span { font-size:12px; color:var(--subtle); }
   main { max-width:940px; margin:32px auto; padding:0 20px;
          display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
-  .card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px; }
+  .card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; }
   h2 { margin:0 0 16px; font-size:15px; font-weight:650; }
   .row { display:flex; justify-content:space-between; padding:7px 0; }
   .row .n { color:var(--muted); }
@@ -320,32 +360,40 @@ async def index():
   .field { margin:14px 0; }
   label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
   .fake-input { border:1px solid var(--line); border-radius:7px; padding:10px 12px;
-                background:#fafafb; font-variant-numeric:tabular-nums; }
+                background:var(--input-bg); font-variant-numeric:tabular-nums; }
   button.pay { width:100%; margin-top:8px; padding:13px; font-size:15px; font-weight:600;
-        color:#fff; background:var(--accent); border:0; border-radius:7px; cursor:pointer; }
-  button.pay:disabled { background:#9db8d4; cursor:not-allowed; }
+        color:var(--on-accent); background:var(--accent); border:0; border-radius:7px; cursor:pointer; }
+  button.pay:disabled { background:var(--disabled); cursor:not-allowed; }
   .status { margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
             display:none; }
   .status.show { display:block; }
   .spinner { display:inline-block; width:13px; height:13px; margin-right:8px;
-             border:2px solid #cfd8e3; border-top-color:var(--accent);
+             border:2px solid var(--spinner-track); border-top-color:var(--accent);
              border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; }
   @keyframes spin { to { transform:rotate(360deg); } }
   .msg { font-weight:600; }
   .msg.fail { color:var(--bad); }
   .msg.ok { color:var(--good); }
   .sub { color:var(--muted); font-size:13px; margin-top:5px; }
-  .panel { background:var(--panel); border-radius:10px; padding:18px 20px; color:#e8e8ee;
+  .panel { background:var(--panel); border-radius:10px; padding:18px 20px; color:var(--panel-ink);
            font:12.5px/1.7 "Source Code Pro",ui-monospace,SFMono-Regular,Menlo,monospace; }
   .panel h3 { margin:0 0 12px; font:600 11px/1 -apple-system,sans-serif;
-              letter-spacing:.09em; text-transform:uppercase; color:#8b8b99; }
+              letter-spacing:.09em; text-transform:uppercase; color:var(--panel-dim); }
   .log { min-height:190px; }
   .log div { display:flex; gap:10px; white-space:pre; }
-  .log .lbl { color:#8b8b99; }
-  .log .ms { color:#ffd479; font-variant-numeric:tabular-nums; }
-  .log .res { color:#8b8b99; }
-  .log .hit { color:#7ee08a; }
-  .log .to  { color:#ff8a8a; }
+  .log .lbl { color:var(--panel-dim); }
+  .log .ms { color:var(--panel-ms); font-variant-numeric:tabular-nums; }
+  .log .res { color:var(--panel-dim); }
+  .log .hit { color:var(--panel-hit); }
+  .log .to  { color:var(--panel-to); }
+  header .brand { justify-content:space-between; }
+  /* Icon-only so it reads as chrome rather than part of the checkout flow — the
+     shopper's page shouldn't look like it has a demo control on it. */
+  .theme-toggle { margin-left:auto; width:32px; height:32px; padding:0; cursor:pointer;
+                  display:grid; place-items:center; font-size:15px; line-height:1;
+                  color:var(--muted); background:transparent;
+                  border:1px solid var(--line); border-radius:8px; }
+  .theme-toggle:hover { color:var(--ink); border-color:var(--subtle); }
 </style>
 </head>
 <body>
@@ -356,6 +404,8 @@ async def index():
       <strong>Leafy Electronics</strong>
       <span>Checkout</span>
     </div>
+    <button class="theme-toggle" id="themeToggle" type="button"
+            aria-label="Toggle dark mode" title="Toggle dark mode"></button>
   </div>
 </header>
 <main>
@@ -380,6 +430,26 @@ async def index():
 </main>
 <script>
 const $ = id => document.getElementById(id);
+
+// Theme toggle. The pre-paint script in <head> already applied the stored choice;
+// this only handles clicks and keeps the icon in sync.
+(function () {
+  const root = document.documentElement;
+  const btn = $('themeToggle');
+  const paint = () => {
+    const dark = root.getAttribute('data-theme') === 'dark';
+    // Show the theme you would switch TO, which is the convention users expect.
+    btn.textContent = dark ? '☀' : '☾';
+  };
+  btn.onclick = () => {
+    const dark = root.getAttribute('data-theme') === 'dark';
+    if (dark) root.removeAttribute('data-theme');
+    else root.setAttribute('data-theme', 'dark');
+    try { localStorage.setItem('theme', dark ? 'light' : 'dark'); } catch (e) {}
+    paint();
+  };
+  paint();
+})();
 let cfg = { client_timeout_s: 12, poll_interval_ms: 2500 };
 
 // Incident state is intentionally NOT shown on the page — this is a shopper's