enforce dark theme in gradio shadow host

app.py

@@ -793,6 +793,10 @@ if __name__ == "__main__":
         css=APP_CSS,
         js="""() => {
           document.documentElement.classList.add('dark');
+          document.body.classList.add('dark');
+          document.body.style.background = '#090b0f';
+          const host = document.querySelector('gradio-app');
+          if (host) host.style.background = '#090b0f';
           try { localStorage.setItem('theme', 'dark'); } catch (_) {}
         }""",
         show_error=True,

assets/app.css

@@ -25,6 +25,18 @@
   --ms-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
 }
 
+/* Gradio 6 mounts the app in a custom-element shadow root. Styling only
+   html/body leaves the host transparent in fresh light-mode browsers. */
+:host {
+  display: block;
+  min-height: 100vh;
+  color-scheme: dark;
+  background:
+    radial-gradient(1000px 620px at 10% -10%, rgba(92, 75, 202, 0.18), transparent 62%),
+    radial-gradient(780px 500px at 96% 8%, rgba(53, 103, 175, 0.12), transparent 66%),
+    linear-gradient(180deg, #0a0c11 0%, #090b0f 50%, #080a0d 100%);
+}
+
 html,
 body {
   min-height: 100%;
@@ -67,7 +79,10 @@ body::after {
 .gradio-container,
 .gradio-container.dark {
   min-height: 100vh !important;
-  background: transparent !important;
+  background:
+    radial-gradient(1000px 620px at 10% -10%, rgba(92, 75, 202, 0.18), transparent 62%),
+    radial-gradient(780px 500px at 96% 8%, rgba(53, 103, 175, 0.12), transparent 66%),
+    linear-gradient(180deg, #0a0c11 0%, #090b0f 50%, #080a0d 100%) !important;
   color: var(--ms-text) !important;
   font-family: var(--ms-font) !important;
 }