Add adaptive clinical dual-theme (light + dark)

Replaces the force-dark hack with a real adaptive dual-theme that follows
the visitor's OS / HF Spaces preference.

- Tokenize every color in the CSS block: ~25 existing vars kept, ~20 new
semantic tokens added for previously-hardcoded literals. Accent-tinted
fills now use color-mix() against an accent token, which resolves
pixel-exact in dark (e.g. --green #76b900 == rgb(118,185,0)).
- Define two token blocks mirroring Gradio's own selectors: :root carries
the new light "clinical blue" palette; :root.dark, :root .dark carries
the dark "MAISI Console" palette (values copied verbatim, so dark mode
is unchanged). Gradio toggles the .dark class from the user preference.
- The niivue viewer surface and its empty-state placeholder stay dark in
both themes (radiology/PACS convention); their colors are not tokenized.
- Modality dots (.ws-dot) in the three workspaces now use var(--ct/mr/mrb)
so they pick up the deepened light-mode modality colors.
- Remove _all_dark_theme(); use stock gr.themes.Base(). head meta is now
color-scheme: light dark so native chrome adapts.

Verified with Playwright against gradio 6.14.0: hero + CT workspace render
correctly in both ?__theme=light and ?__theme=dark; viewer stays dark;
no console errors.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

app.py

@@ -63,13 +63,82 @@ from ui import workspace_ct, workspace_mr, workspace_mr_brain
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
 
+/* ═══════════════ theme tokens ═══════════════
+   Two coordinated palettes. Gradio toggles a `.dark` class on the document
+   from the visitor's OS / HF Spaces preference and emits its own tokens under
+   `:root` (light) + `:root.dark, :root .dark` (dark) — see gradio/themes/
+   base.py. We mirror that exact selector pattern so the whole UI flips with
+   it. `:root` carries the light "clinical blue" theme; `:root.dark` carries
+   the navy "MAISI Console" theme (values unchanged from the original dark
+   build). Accent-tinted fills use color-mix() against an accent token, which
+   resolves pixel-exact in dark (e.g. --green #76b900 == rgb(118,185,0)) and
+   adapts automatically in light. */
 :root {
-  /* Navy / blue-black palette — distinctly blue, never gray */
+  /* fonts + layout — theme-independent */
+  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", monospace;
+  --num: "Geist Mono", ui-monospace, monospace;
+  --container: 1240px;
+  --gutter: 32px;
+
+  /* ─── LIGHT — clean medical-blue clinical ─── */
+  --page-bg: #eef2f7;
+  --page-grad-a: #f7f9fc;
+  --page-grad-b: #eef2f8;
+  --page-grad-c: #e8edf5;
+  --bg-0: #e8edf5;
+  --bg-1: #f3f6fb;
+  --bg-2: #e6ecf5;
+  --panel: #ffffff;
+  --panel-2: #f4f7fb;
+  --viewer-bg: #0b1020;
+  --line: rgba(20, 55, 110, 0.14);
+  --line-strong: rgba(20, 55, 110, 0.22);
+  --line-bright: rgba(20, 55, 110, 0.34);
+  --text: #122036;
+  --text-2: #3b4c66;
+  --muted: #647387;
+  --muted-2: #97a3b6;
+
+  --green: #5f9400;
+  --green-glow: rgba(95, 148, 0, 0.40);
+  --green-soft: rgba(95, 148, 0, 0.12);
+  --warn: #9a6b00;
+  --warn-soft: rgba(154, 107, 0, 0.10);
+
+  --ct: #5f9400;
+  --mr: #1f7ed4;
+  --mrb: #7c4dd6;
+
+  --grid-line: rgba(20, 55, 110, 0.07);
+  --glow-blue: rgba(31, 126, 212, 0.07);
+  --glow-purple: rgba(124, 77, 214, 0.05);
+  --card-hl: rgba(255, 255, 255, 0);
+  --banner-shade: rgba(20, 40, 80, 0.06);
+  --banner-grid: rgba(20, 55, 110, 0.05);
+  --chip-bg: rgba(20, 55, 110, 0.04);
+  --chip-bg-faint: rgba(20, 55, 110, 0.025);
+  --shadow: rgba(20, 40, 85, 0.16);
+  --preset-label: #4a6f9e;
+  --license-link: #8a5200;
+  --cta-off-a: #c4cdbb;
+  --cta-off-b: #b4bdab;
+  --cta-off-border: #a6b39a;
+  --cta-off-text: rgba(24, 32, 12, 0.62);
+}
+
+:root.dark, :root .dark {
+  /* ─── DARK — navy "MAISI Console" (unchanged from original build) ─── */
+  --page-bg: #010206;
+  --page-grad-a: #050810;
+  --page-grad-b: #02040c;
+  --page-grad-c: #010206;
   --bg-0: #06102a;
   --bg-1: #0a1530;
   --bg-2: #0e1838;
   --panel: #0e1b3a;
   --panel-2: #142348;
+  --viewer-bg: #0b1020;
   --line: rgba(140, 180, 240, 0.12);
   --line-strong: rgba(140, 180, 240, 0.22);
   --line-bright: rgba(140, 180, 240, 0.38);
@@ -88,12 +157,21 @@ CSS = """
   --mr: #5fb4ff;
   --mrb: #b48aff;
 
-  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", monospace;
-  --num: "Geist Mono", ui-monospace, monospace;
-
-  --container: 1240px;
-  --gutter: 32px;
+  --grid-line: rgba(0, 0, 6, 0.42);
+  --glow-blue: rgba(70, 140, 230, 0.16);
+  --glow-purple: rgba(140, 100, 220, 0.06);
+  --card-hl: rgba(255, 255, 255, 0.04);
+  --banner-shade: rgba(0, 0, 0, 0.22);
+  --banner-grid: rgba(150, 180, 240, 0.06);
+  --chip-bg: rgba(140, 180, 240, 0.04);
+  --chip-bg-faint: rgba(140, 180, 240, 0.03);
+  --shadow: rgba(0, 0, 0, 0.70);
+  --preset-label: rgba(170, 200, 255, 0.85);
+  --license-link: #ffe9a3;
+  --cta-off-a: #4a5f00;
+  --cta-off-b: #3a4c00;
+  --cta-off-border: #2a3700;
+  --cta-off-text: var(--cta-off-text);
 }
 
 /* ─────────────── base + blueprint grid ─────────────── */
@@ -114,7 +192,7 @@ gradio-app {
   --color-background-primary: transparent !important;
 }
 
-html { background: #010206 !important; }
+html { background: var(--page-bg) !important; }
 html, body {
   color: var(--text) !important;
   font-family: var(--font-sans);
@@ -124,19 +202,19 @@ html, body {
 body {
   background-image:
     /* Concentrated blue glow behind the hero only — not page-wide */
-    radial-gradient(ellipse 1100px 600px at 50% 220px, rgba(70, 140, 230, 0.16), transparent 65%),
+    radial-gradient(ellipse 1100px 600px at 50% 220px, var(--glow-blue), transparent 65%),
     /* NVIDIA green hint warming the top-left of the page */
-    radial-gradient(ellipse 700px 380px at 18% -40px, rgba(118, 185, 0, 0.06), transparent 70%),
+    radial-gradient(ellipse 700px 380px at 18% -40px, color-mix(in srgb, var(--green) 6%, transparent), transparent 70%),
     /* Cool purple sweep at lower-right (very faint) */
-    radial-gradient(ellipse 900px 600px at 108% 108%, rgba(140, 100, 220, 0.06), transparent 60%),
-    /* Architectural blueprint grid — dark lines for blueprint-paper feel */
-    linear-gradient(rgba(0, 0, 6, 0.42) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(0, 0, 6, 0.42) 1px, transparent 1px),
-    /* Near-black base with a whisper of navy — panels now pop against this */
-    linear-gradient(180deg, #050810 0%, #02040c 50%, #010206 100%) !important;
+    radial-gradient(ellipse 900px 600px at 108% 108%, var(--glow-purple), transparent 60%),
+    /* Architectural blueprint grid */
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    /* Page base — subtle vertical wash so panels lift off it */
+    linear-gradient(180deg, var(--page-grad-a) 0%, var(--page-grad-b) 50%, var(--page-grad-c) 100%) !important;
   background-size: auto, auto, auto, 32px 32px, 32px 32px, auto;
   background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
-  background-color: #010206 !important;
+  background-color: var(--page-bg) !important;
 }
 
 /* ─────────────── film-grain noise overlay ─────────────── */
@@ -162,9 +240,9 @@ body::after {
   pointer-events: none;
   background: linear-gradient(90deg,
     transparent 5%,
-    rgba(118, 185, 0, 0.35) 30%,
-    rgba(118, 185, 0, 0.85) 50%,
-    rgba(118, 185, 0, 0.35) 70%,
+    color-mix(in srgb, var(--green) 35%, transparent) 30%,
+    color-mix(in srgb, var(--green) 85%, transparent) 50%,
+    color-mix(in srgb, var(--green) 35%, transparent) 70%,
     transparent 95%);
   filter: blur(3px);
   animation: page-scanline 1.8s cubic-bezier(.4,.0,.2,1) 0.4s 1 forwards;
@@ -282,8 +360,8 @@ gradio-app .contain, gradio-app #root, .app, .main, .wrap, .contain {
   left: 50%; top: -40px;
   transform: translateX(-50%);
   background:
-    radial-gradient(ellipse at center, rgba(95, 180, 255, 0.18) 0%, transparent 55%),
-    radial-gradient(ellipse at 30% 70%, rgba(118, 185, 0, 0.12) 0%, transparent 60%);
+    radial-gradient(ellipse at center, color-mix(in srgb, var(--mr) 18%, transparent) 0%, transparent 55%),
+    radial-gradient(ellipse at 30% 70%, color-mix(in srgb, var(--green) 12%, transparent) 0%, transparent 60%);
   filter: blur(16px);
   pointer-events: none;
   z-index: -1;
@@ -337,7 +415,7 @@ gradio-app .contain, gradio-app #root, .app, .main, .wrap, .contain {
   border-color: color-mix(in srgb, var(--accent) 60%, transparent);
   background: var(--panel-2);
   box-shadow:
-    0 1px 0 rgba(255,255,255,0.04) inset,
+    0 1px 0 var(--card-hl) inset,
     0 24px 60px -16px color-mix(in srgb, var(--accent) 35%, transparent);
 }
 .ds-card:hover .ds-corner { background: var(--accent); }
@@ -357,7 +435,7 @@ gradio-app .contain, gradio-app #root, .app, .main, .wrap, .contain {
   gap: 6px;
   border-bottom: 1px solid var(--line);
   background:
-    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.22) 100%),
+    linear-gradient(180deg, transparent 0%, var(--banner-shade) 100%),
     radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 60%);
   overflow: hidden;
   color: var(--accent);
@@ -365,8 +443,8 @@ gradio-app .contain, gradio-app #root, .app, .main, .wrap, .contain {
 .ds-banner-grid {
   position: absolute; inset: 0;
   background-image:
-    linear-gradient(rgba(150,180,240,0.06) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(150,180,240,0.06) 1px, transparent 1px);
+    linear-gradient(var(--banner-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--banner-grid) 1px, transparent 1px);
   background-size: 16px 16px;
   pointer-events: none;
   mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
@@ -479,14 +557,14 @@ gradio-app .contain, gradio-app #root, .app, .main, .wrap, .contain {
   display: inline-flex; align-items: center;
   padding: 4px 9px;
   border: 1px solid var(--line);
-  background: rgba(140, 180, 240, 0.04);
+  background: var(--chip-bg);
   font-family: var(--font-sans); font-size: 11px;
   font-weight: 500;
   letter-spacing: 0;
   color: var(--text-2);
   white-space: nowrap;
 }
-.ds-card:hover .ds-use { border-color: rgba(140, 180, 240, 0.20); }
+.ds-card:hover .ds-use { border-color: var(--line-strong); }
 
 /* License chip: separate from availability status, lives at card bottom */
 .ds-license {
@@ -494,7 +572,7 @@ gradio-app .contain, gradio-app #root, .app, .main, .wrap, .contain {
   padding: 8px 12px;
   display: flex; align-items: center; gap: 10px;
   border: 1px solid var(--line);
-  background: rgba(140, 180, 240, 0.03);
+  background: var(--chip-bg-faint);
   font-family: var(--font-mono); font-size: 10px;
   letter-spacing: 0.04em;
 }
@@ -504,12 +582,12 @@ gradio-app .contain, gradio-app #root, .app, .main, .wrap, .contain {
 }
 .ds-license-v { color: var(--text); }
 .ds-license-warn {
-  border-color: rgba(246, 200, 97, 0.30);
+  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
   background: var(--warn-soft);
 }
 .ds-license-warn .ds-license-v { color: var(--warn); }
 .ds-license-ok {
-  border-color: rgba(118, 185, 0, 0.25);
+  border-color: color-mix(in srgb, var(--green) 25%, transparent);
 }
 .ds-license-ok .ds-license-v { color: var(--text); }
 
@@ -579,9 +657,9 @@ gradio-app .contain, gradio-app #root, .app, .main, .wrap, .contain {
   cursor: pointer !important;
   transition: all 200ms ease !important;
 }
-.ds-cta-ct button:hover  { border-color: var(--ct)  !important; background: rgba(118, 185, 0, 0.10) !important; color: var(--ct) !important; }
-.ds-cta-mr button:hover  { border-color: var(--mr)  !important; background: rgba(95, 180, 255, 0.10) !important; color: var(--mr) !important; }
-.ds-cta-mrb button:hover { border-color: var(--mrb) !important; background: rgba(180, 138, 255, 0.10) !important; color: var(--mrb) !important; }
+.ds-cta-ct button:hover  { border-color: var(--ct)  !important; background: color-mix(in srgb, var(--ct) 10%, transparent)  !important; color: var(--ct) !important; }
+.ds-cta-mr button:hover  { border-color: var(--mr)  !important; background: color-mix(in srgb, var(--mr) 10%, transparent)  !important; color: var(--mr) !important; }
+.ds-cta-mrb button:hover { border-color: var(--mrb) !important; background: color-mix(in srgb, var(--mrb) 10%, transparent) !important; color: var(--mrb) !important; }
 
 /* ─────────────── workspace shell ─────────────── */
 .workspace { padding: 0 0 32px; animation: fadein 0.35s ease both; }
@@ -595,7 +673,7 @@ gradio-app .contain, gradio-app #root, .app, .main, .wrap, .contain {
   padding: 24px 26px;
   margin: 0 0 28px !important;
   background:
-    linear-gradient(180deg, rgba(120,165,255,0.05), rgba(120,165,255,0.02)),
+    linear-gradient(180deg, color-mix(in srgb, var(--mr) 5%, transparent), color-mix(in srgb, var(--mr) 2%, transparent)),
     var(--panel);
   border: 1px solid var(--line);
   border-left: 3px solid var(--accent, var(--green));
@@ -849,7 +927,7 @@ body ul[role="listbox"] {
   background-color: var(--panel-2) !important;
   border: 1px solid var(--line-strong) !important;
   border-radius: 0 !important;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 2px 0 rgba(118, 185, 0, 0.20) inset !important;
+  box-shadow: 0 10px 40px var(--shadow), 0 2px 0 color-mix(in srgb, var(--green) 20%, transparent) inset !important;
   font-family: var(--font-sans) !important;
   color: var(--text) !important;
   padding: 4px 0 !important;
@@ -878,12 +956,12 @@ body [role="option"] {
 body .options li:hover,
 body ul[role="listbox"] li:hover,
 body [role="option"]:hover {
-  background: rgba(118, 185, 0, 0.12) !important;
+  background: color-mix(in srgb, var(--green) 12%, transparent) !important;
   color: var(--green) !important;
 }
 .gradio-container [role="option"][aria-selected="true"],
 body [role="option"][aria-selected="true"] {
-  background: rgba(118, 185, 0, 0.18) !important;
+  background: color-mix(in srgb, var(--green) 18%, transparent) !important;
   color: var(--green) !important;
 }
 
@@ -984,7 +1062,7 @@ body [role="option"][aria-selected="true"] {
 }
 .controls .gradio-checkboxgroup label:has(input:checked),
 .controls fieldset label:has(input:checked) {
-  background: rgba(118, 185, 0, 0.14) !important;
+  background: color-mix(in srgb, var(--green) 14%, transparent) !important;
   border-color: var(--green) !important;
   color: var(--green) !important;
 }
@@ -1066,28 +1144,28 @@ body [role="option"][aria-selected="true"] {
 .controls .primary-cta button:disabled:active,
 .gradio-container .primary-cta button:disabled,
 .gradio-container .primary-cta button:disabled:hover {
-  background: linear-gradient(180deg, #4a5f00 0%, #3a4c00 100%) !important;
-  color: rgba(255, 255, 255, 0.70) !important;
-  -webkit-text-fill-color: rgba(255, 255, 255, 0.70) !important;
+  background: linear-gradient(180deg, var(--cta-off-a) 0%, var(--cta-off-b) 100%) !important;
+  color: var(--cta-off-text) !important;
+  -webkit-text-fill-color: var(--cta-off-text) !important;
   cursor: wait !important;
   opacity: 1 !important;
   transform: none !important;
   box-shadow: none !important;
-  border-color: #2a3700 !important;
+  border-color: var(--cta-off-border) !important;
 }
 /* Make sure nested spans inside the disabled button inherit the dim text color */
 .primary-cta button:disabled *,
 .primary-cta button:disabled:hover * {
-  color: rgba(255, 255, 255, 0.70) !important;
-  -webkit-text-fill-color: rgba(255, 255, 255, 0.70) !important;
+  color: var(--cta-off-text) !important;
+  -webkit-text-fill-color: var(--cta-off-text) !important;
 }
 .primary-cta button:disabled::after {
   content: "";
   display: inline-block;
   width: 10px; height: 10px;
   margin-left: 10px;
-  border: 2px solid rgba(255,255,255,0.3);
-  border-top-color: rgba(255,255,255,0.85);
+  border: 2px solid color-mix(in srgb, currentColor 32%, transparent);
+  border-top-color: currentColor;
   border-radius: 50%;
   animation: btn-spin 0.8s linear infinite;
   vertical-align: -2px;
@@ -1108,7 +1186,7 @@ body [role="option"][aria-selected="true"] {
 .viewer-strip-left { color: var(--muted); }
 .viewer-strip-right { color: var(--text-2); }
 .viewer {
-  background: var(--bg-1) !important;
+  background: var(--viewer-bg) !important;
   border: 1px solid var(--line) !important;
   border-radius: 0 !important;
   padding: 0 !important;
@@ -1124,7 +1202,7 @@ body [role="option"][aria-selected="true"] {
   margin: 14px 0 !important;
   border: 1px solid var(--line) !important;
   background:
-    linear-gradient(180deg, rgba(80, 150, 240, 0.10) 0%, rgba(80, 150, 240, 0.03) 100%),
+    linear-gradient(180deg, color-mix(in srgb, var(--mr) 10%, transparent) 0%, color-mix(in srgb, var(--mr) 3%, transparent) 100%),
     var(--panel) !important;
   position: relative;
 }
@@ -1132,14 +1210,14 @@ body [role="option"][aria-selected="true"] {
   /* Thin left-edge accent to mark this as a control surface */
   content: ""; position: absolute; left: 0; top: 0; bottom: 0;
   width: 2px;
-  background: linear-gradient(180deg, rgba(95, 180, 255, 0.55), rgba(95, 180, 255, 0.15));
+  background: linear-gradient(180deg, color-mix(in srgb, var(--mr) 55%, transparent), color-mix(in srgb, var(--mr) 15%, transparent));
 }
 .preset-label {
   font-family: var(--font-mono) !important;
   font-size: 10px;
   letter-spacing: 0.20em;
   text-transform: uppercase;
-  color: rgba(170, 200, 255, 0.85);
+  color: var(--preset-label);
   padding: 0 !important;
 }
 
@@ -1159,7 +1237,7 @@ body [role="option"][aria-selected="true"] {
 }
 .preset-row input[type="radio"] { display: none; }
 .preset-row label:has(input:checked) {
-  background: rgba(118, 185, 0, 0.14) !important;
+  background: color-mix(in srgb, var(--green) 14%, transparent) !important;
   border-color: var(--green) !important;
   color: var(--green) !important;
 }
@@ -1194,7 +1272,7 @@ body [role="option"][aria-selected="true"] {
   display: inline-flex; align-items: baseline; gap: 6px;
   padding: 3px 8px;
   border: 1px solid var(--line);
-  background: rgba(140, 180, 240, 0.04);
+  background: var(--chip-bg);
   font-family: var(--font-mono); font-size: 10px;
   white-space: nowrap;
 }
@@ -1206,7 +1284,7 @@ body [role="option"][aria-selected="true"] {
 .license-banner {
   margin: 0 0 28px !important;
   padding: 14px 18px 16px;
-  border: 1px solid rgba(246, 200, 97, 0.25);
+  border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
   border-left: 3px solid var(--warn);
   background: var(--warn-soft);
   color: var(--warn);
@@ -1224,16 +1302,18 @@ body [role="option"][aria-selected="true"] {
   font-size: 10px;
   font-weight: 600;
 }
-.license-banner a { color: #ffe9a3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
+.license-banner a { color: var(--license-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
 
 /* ─────────────── empty viewport: 2x2 wireframe preview of what's coming ─────────────── */
+/* The viewer surface (and this placeholder) stay dark in both themes —
+   radiology/PACS convention; grayscale volumes read most accurately on dark. */
 .nv-empty {
   position: relative;
   width: 100%; aspect-ratio: 1/1; max-height: 720px;
   background:
     radial-gradient(circle at 50% 50%, rgba(95, 180, 255, 0.06) 0%, transparent 55%),
-    var(--bg-1);
-  color: var(--muted);
+    var(--viewer-bg);
+  color: #7280a0;
   overflow: hidden;
 }
 /* The 2x2 grid showing where each MPR pane will render after generation */
@@ -1280,7 +1360,7 @@ body [role="option"][aria-selected="true"] {
   text-align: center;
   padding: 12px 18px;
   background: linear-gradient(180deg, rgba(10, 21, 48, 0.92), rgba(10, 21, 48, 0.82));
-  border: 1px solid var(--line);
+  border: 1px solid rgba(140, 180, 240, 0.12);
   backdrop-filter: blur(6px);
   z-index: 2;
   min-width: 280px;
@@ -1289,13 +1369,13 @@ body [role="option"][aria-selected="true"] {
   font-family: var(--font-sans);
   font-size: 13px;
   font-weight: 500;
-  color: var(--text);
+  color: #ecf0fa;
   margin-bottom: 6px;
 }
 .nv-empty-msg {
   font-family: var(--font-sans);
   font-size: 11.5px;
-  color: var(--muted);
+  color: #7280a0;
   max-width: 280px; text-align: center;
   line-height: 1.5;
 }
@@ -1425,30 +1505,13 @@ footer { display: none !important; }
 """
 
 
-# The UI is dark-mode-native (navy "MAISI Console" aesthetic) — there is no
-# light variant. Rather than fight Gradio's light/dark toggle at the DOM level
-# (DOM/observer hacks break SSR hydration), we collapse the theme itself:
-# Gradio's _get_theme_css() emits every token twice — under `:root` (light) and
-# `:root.dark` (dark). By copying each token's dark value onto its light
-# counterpart, `:root` carries dark colors too, so the app renders dark
-# regardless of OS preference or the HF Spaces theme switch. Pure CSS output —
-# nothing client-side to break.
-def _all_dark_theme() -> gr.themes.Base:
-    theme = gr.themes.Base()
-    for attr in list(theme.__dict__):
-        if attr.startswith("_") or not attr.endswith("_dark"):
-            continue
-        dark_val = theme.__dict__[attr]
-        if dark_val is None:  # None => dark inherits light; leave light as-is
-            continue
-        light_attr = attr[: -len("_dark")]
-        if light_attr in theme.__dict__:
-            theme.__dict__[light_attr] = dark_val
-    return theme
-
-
-# Keep the browser's native chrome (scrollbars, form controls) dark too.
-DARK_HEAD = '<meta name="color-scheme" content="dark">'
+# Adaptive dual-theme: the CSS block defines both a light ("clinical blue") and
+# a dark ("MAISI Console") palette under `:root` / `:root.dark`. Gradio's stock
+# Base theme toggles the `.dark` class from the visitor's OS / HF Spaces
+# preference, so the whole UI follows along — no DOM hacks, no force-dark.
+# `color-scheme: light dark` keeps native browser chrome (scrollbars, form
+# controls) in step with the active theme.
+THEME_HEAD = '<meta name="color-scheme" content="light dark">'
 
 
 def build_app() -> gr.Blocks:
@@ -1484,6 +1547,6 @@ if __name__ == "__main__":
         server_port=int(os.environ.get("PORT", "7860")),
         show_error=True,
         css=CSS,
-        theme=_all_dark_theme(),
-        head=DARK_HEAD,
+        theme=gr.themes.Base(),
+        head=THEME_HEAD,
     )

ui/workspace_ct.py

@@ -32,7 +32,7 @@ def build(spaces_gpu: Any) -> tuple[gr.Group, gr.Button]:
             back_btn = gr.Button("← Back", elem_classes=["back-btn"], scale=0)
             gr.HTML(
                 '<div class="workspace-title">'
-                '<span class="ws-dot" style="background:#76b900;color:#76b900"></span>'
+                '<span class="ws-dot" style="background:var(--ct);color:var(--ct)"></span>'
                 '<span class="ws-crumb">NV-Generate</span>'
                 '<span class="ws-crumb-sep">/</span>'
                 '<span class="ws-active">CT</span>'

ui/workspace_mr.py

@@ -21,7 +21,7 @@ def build(spaces_gpu: Any) -> tuple[gr.Group, gr.Button]:
             back_btn = gr.Button("← Back", elem_classes=["back-btn"], scale=0)
             gr.HTML(
                 '<div class="workspace-title">'
-                '<span class="ws-dot" style="background:#5fb4ff;color:#5fb4ff"></span>'
+                '<span class="ws-dot" style="background:var(--mr);color:var(--mr)"></span>'
                 '<span class="ws-crumb">NV-Generate</span>'
                 '<span class="ws-crumb-sep">/</span>'
                 '<span class="ws-active">MR</span>'

ui/workspace_mr_brain.py

@@ -17,7 +17,7 @@ def build(spaces_gpu: Any) -> tuple[gr.Group, gr.Button]:
             back_btn = gr.Button("← Back", elem_classes=["back-btn"], scale=0)
             gr.HTML(
                 '<div class="workspace-title">'
-                '<span class="ws-dot" style="background:#b48aff;color:#b48aff"></span>'
+                '<span class="ws-dot" style="background:var(--mrb);color:var(--mrb)"></span>'
                 '<span class="ws-crumb">NV-Generate</span>'
                 '<span class="ws-crumb-sep">/</span>'
                 '<span class="ws-active">MR Brain</span>'