Update ui/theme.py

ui/theme.py

@@ -51,14 +51,19 @@ NOVA_THEME = gr.themes.Base(
     input_border_color_dark="rgba(255,255,255,0.08)",
 )
 
-# Gradio reads ?__theme= before our CSS lands; the palette is dark-only, so pin it.
+# Put Gradio into its dark mode WITHOUT reloading the page.
+#
+# The previous version redirected to ?__theme=dark. That's a page reload racing
+# SSR: sometimes the `.dark` class landed (dark, correct), sometimes it didn't
+# (light — near-black text on our dark ground, invisible). Two devices, two race
+# outcomes, one "why does it look different?" bug. Adding the class directly on
+# load is deterministic and flash-free. The CSS below is the real backstop, so
+# even if this never ran the page would still be readable.
 FORCE_DARK = """
 function() {
-  const url = new URL(window.location);
-  if (url.searchParams.get('__theme') !== 'dark') {
-    url.searchParams.set('__theme', 'dark');
-    window.location.replace(url.href);
-  }
+  const mark = (el) => el && el.classList.add('dark');
+  mark(document.documentElement);
+  mark(document.querySelector('gradio-app'));
 }
 """
 
@@ -74,6 +79,28 @@ CSS = """
   --nova-accent-2: #22d3ee;
 }
 
+/* ---- pin Gradio's own theme variables to NOVA's dark palette ----
+   Gradio flips these between light and dark via a `.dark` class on its root.
+   In a light-mode browser that class can be absent, and then Gradio resolves
+   --body-text-color to near-black and --background-fill-primary to literal
+   `white` -- unreadable on our dark ground (this was THE light/dark-browser
+   bug). NOVA is deliberately a single dark console, so force the handful of
+   Gradio variables that would otherwise leak light. `!important` on a custom
+   property wins the cascade no matter the class or the injection order, so the
+   look no longer depends on the `.dark` class landing at all. */
+:root {
+  --body-text-color: #e6e9f2 !important;
+  --body-text-color-subdued: #8b93a7 !important;
+  --background-fill-primary: #080b16 !important;
+  --background-fill-secondary: #0d1322 !important;
+  --border-color-primary: rgba(255,255,255,0.08) !important;
+  --input-placeholder-color: #8b93a7 !important;
+  --code-background-fill: #0d1322 !important;
+  --table-odd-background-fill: #0d1322 !important;
+  --table-even-background-fill: #111828 !important;
+  --table-border-color: rgba(255,255,255,0.08) !important;
+}
+
 /* ---- page shell: cosmic gradient + a slow drifting aurora ---- */
 gradio-app, .gradio-container {
   background: