add

app.py

@@ -1463,11 +1463,27 @@ CSS = """
   --accent: #7dd3fc;
   --accent-2: #f59e0b;
 }
+html {
+  color-scheme: dark;
+}
 body {
   background:
     radial-gradient(circle at top left, rgba(125, 211, 252, 0.22), transparent 28%),
     radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 24%),
     linear-gradient(135deg, var(--bg-1), var(--bg-2));
+  color: var(--text);
+}
+.gradio-container {
+  color: var(--text);
+}
+.gradio-container *,
+.gradio-container :is(p, span, div, label, strong, em, li, summary) {
+  color: inherit;
+}
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+  color: var(--text) !important;
 }
 .wrap {
   max-width: 1180px;
@@ -2290,11 +2306,56 @@ APP_JS = """
         boot();
       }
     })();
-    """
+"""
+
+APP_THEME = gr.themes.Soft().set(
+    body_background_fill="#06111f",
+    body_background_fill_dark="#06111f",
+    body_text_color="#f4f7fb",
+    body_text_color_dark="#f4f7fb",
+    body_text_color_subdued="#b7c3d6",
+    body_text_color_subdued_dark="#b7c3d6",
+    background_fill_primary="#0b1220",
+    background_fill_primary_dark="#0b1220",
+    background_fill_secondary="#10192b",
+    background_fill_secondary_dark="#10192b",
+    panel_background_fill="#0b1220",
+    panel_background_fill_dark="#0b1220",
+    panel_border_color="rgba(255, 255, 255, 0.12)",
+    panel_border_color_dark="rgba(255, 255, 255, 0.12)",
+    block_background_fill="#0b1220",
+    block_background_fill_dark="#0b1220",
+    block_border_color="rgba(255, 255, 255, 0.12)",
+    block_border_color_dark="rgba(255, 255, 255, 0.12)",
+    input_background_fill="#111827",
+    input_background_fill_dark="#111827",
+    input_border_color="rgba(255, 255, 255, 0.12)",
+    input_border_color_dark="rgba(255, 255, 255, 0.12)",
+    input_placeholder_color="#94a3b8",
+    input_placeholder_color_dark="#94a3b8",
+    button_secondary_background_fill="#202938",
+    button_secondary_background_fill_dark="#202938",
+    button_secondary_background_fill_hover="#283244",
+    button_secondary_background_fill_hover_dark="#283244",
+    button_secondary_border_color="rgba(255, 255, 255, 0.12)",
+    button_secondary_border_color_dark="rgba(255, 255, 255, 0.12)",
+    button_secondary_text_color="#f4f7fb",
+    button_secondary_text_color_dark="#f4f7fb",
+    button_primary_background_fill="#2563eb",
+    button_primary_background_fill_dark="#2563eb",
+    button_primary_text_color="#ffffff",
+    button_primary_text_color_dark="#ffffff",
+    checkbox_label_text_color="#f4f7fb",
+    checkbox_label_text_color_dark="#f4f7fb",
+    radio_circle="#7dd3fc",
+    checkbox_check="#7dd3fc",
+)
 
 
 with gr.Blocks(
     title="Polyglot Tagger Studio",
+    theme=APP_THEME,
+    css=CSS,
 ) as demo:
     gr.HTML(
         """
@@ -2417,4 +2478,4 @@ with gr.Blocks(
 
 if __name__ == "__main__":
     demo.queue()
-    demo.launch(css=CSS, js=APP_JS, share=os.getenv("GRADIO_SHARE", "1") != "0")
+    demo.launch(js=APP_JS, share=os.getenv("GRADIO_SHARE", "1") != "0")