space: force dark via CSS variable override (removes JS redirect lag)

app.py

@@ -246,6 +246,9 @@ def refresh_gallery():
 
 
 CUSTOM_CSS = r"""
+/* Force dark theme regardless of system / browser preference.
+   Overrides Gradio's neutral scale (used as bg in light mode) to dark values
+   so the page renders the same way whether or not .dark class is present. */
 :root {
   --grad-a: #a78bfa;
   --grad-b: #f472b6;
@@ -255,6 +258,50 @@ CUSTOM_CSS = r"""
   --border-card: rgba(167, 139, 250, 0.32);
   --text-main: #f1f5f9;
   --text-mute: #94a3b8;
+  color-scheme: dark;
+}
+html, body, gradio-app, .gradio-container {
+  background: #020617 !important;
+  color: #f1f5f9 !important;
+}
+.gradio-container,
+gradio-app {
+  --body-background-fill: #020617;
+  --body-background-fill-dark: #020617;
+  --background-fill-primary: #0f172a;
+  --background-fill-primary-dark: #0f172a;
+  --background-fill-secondary: #1e293b;
+  --background-fill-secondary-dark: #1e293b;
+  --block-background-fill: #0f172a;
+  --block-background-fill-dark: #0f172a;
+  --block-border-color: rgba(167, 139, 250, 0.32);
+  --block-border-color-dark: rgba(167, 139, 250, 0.32);
+  --border-color-primary: rgba(167, 139, 250, 0.32);
+  --border-color-primary-dark: rgba(167, 139, 250, 0.32);
+  --input-background-fill: #0f172a;
+  --input-background-fill-dark: #0f172a;
+  --input-border-color: rgba(167, 139, 250, 0.32);
+  --input-border-color-dark: rgba(167, 139, 250, 0.32);
+  --button-secondary-background-fill: #1e293b;
+  --button-secondary-background-fill-dark: #1e293b;
+  --button-secondary-text-color: #f1f5f9;
+  --button-secondary-text-color-dark: #f1f5f9;
+  --body-text-color: #f1f5f9;
+  --body-text-color-dark: #f1f5f9;
+  --body-text-color-subdued: #94a3b8;
+  --body-text-color-subdued-dark: #94a3b8;
+  --color-accent: #a78bfa;
+  --color-accent-soft: rgba(167, 139, 250, 0.15);
+  --neutral-50: #1e293b;
+  --neutral-100: #1e293b;
+  --neutral-200: #334155;
+  --neutral-300: #475569;
+  --neutral-400: #64748b;
+  --neutral-500: #94a3b8;
+  --neutral-600: #cbd5e1;
+  --neutral-700: #e2e8f0;
+  --neutral-800: #f1f5f9;
+  --neutral-900: #f8fafc;
 }
 
 .gradio-container { max-width: 1100px !important; margin: 0 auto !important; padding-left: 1rem !important; padding-right: 1rem !important; }
@@ -1239,23 +1286,11 @@ That's the project's central constraint and its main flex on AMD's headline GPU.
 """
 
 
-FORCE_DARK_JS = """
-() => {
-    const url = new URL(window.location);
-    if (url.searchParams.get('__theme') !== 'dark') {
-        url.searchParams.set('__theme', 'dark');
-        window.location.href = url.href;
-    }
-}
-"""
-
-
 def build_ui():
     with gr.Blocks(
         theme=gr.themes.Base(primary_hue="violet", secondary_hue="pink",
                              neutral_hue="slate"),
         css=CUSTOM_CSS,
-        js=FORCE_DARK_JS,
         title="StudioMI300",
     ) as demo:
         gr.HTML(HERO_HTML)