Keep text dark when the browser is in dark mode

app.py

@@ -247,7 +247,38 @@ DIAL_CSS = """
 .gradio-container, .gradio-container * {
   font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
 }
+.gradio-container, .gradio-container.dark, .dark {
+  color-scheme: light !important;
+  --body-background-fill: #faf9f5;
+  --body-text-color: #141413;
+  --body-text-color-subdued: #6b6560;
+  --background-fill-primary: #faf9f5;
+  --background-fill-secondary: #f7f6f2;
+  --block-background-fill: #ffffff;
+  --block-border-color: #e8e6dc;
+  --block-label-text-color: #6b6560;
+  --block-title-text-color: #141413;
+  --input-background-fill: #ffffff;
+  --input-border-color: #e8e6dc;
+  --input-placeholder-color: #8a847c;
+  --button-secondary-background-fill: #f0eee6;
+  --button-secondary-text-color: #141413;
+  --button-primary-text-color: #ffffff;
+  --neutral-50: #faf9f5;
+  --neutral-100: #f0eee6;
+  --neutral-200: #e8e6dc;
+  --neutral-400: #8a847c;
+  --neutral-600: #6b6560;
+  --neutral-800: #141413;
+  --neutral-950: #141413;
+}
 .gradio-container { background: #faf9f5 !important; color: #141413 !important; }
+textarea, input, select, .prose, .prose p, .prose span, label, .cmp-body, .cmp-body b, .user-bubble, .guide, .guide p, .guide b {
+  color: #141413 !important;
+}
+.guide-kicker, .cmp.steered .cmp-label { color: #c96442 !important; }
+textarea, input[type="text"], input[type="number"] { background: #ffffff !important; }
+button.primary, button.primary * { color: #ffffff !important; }
 #layout { flex-wrap: nowrap !important; align-items: flex-start !important; gap: 22px !important; }
 #chat-col { min-width: 0 !important; flex: 1 1 auto !important; }
 #dial-col { flex: 0 0 340px !important; width: 340px !important; position: sticky; top: 8px; }
@@ -389,11 +420,28 @@ def build_demo():
         block_border_color="#e8e6dc",
         block_label_text_color="#6b6560",
         input_background_fill="#ffffff",
+        input_background_fill_dark="#ffffff",
+        body_background_fill_dark="#faf9f5",
+        body_text_color_dark="#141413",
+        body_text_color_subdued="#6b6560",
+        body_text_color_subdued_dark="#6b6560",
+        block_background_fill_dark="#ffffff",
+        block_border_color_dark="#e8e6dc",
+        block_label_text_color_dark="#6b6560",
+        block_title_text_color="#141413",
+        block_title_text_color_dark="#141413",
+        input_placeholder_color="#8a847c",
+        input_placeholder_color_dark="#8a847c",
         button_primary_background_fill="#c96442",
+        button_primary_background_fill_dark="#c96442",
         button_primary_background_fill_hover="#b55638",
+        button_primary_background_fill_hover_dark="#b55638",
         button_primary_text_color="#ffffff",
+        button_primary_text_color_dark="#ffffff",
         button_secondary_background_fill="#f0eee6",
+        button_secondary_background_fill_dark="#f0eee6",
         button_secondary_text_color="#141413",
+        button_secondary_text_color_dark="#141413",
     )
     with gr.Blocks(title="Analogy Vector", theme=theme, css=DIAL_CSS, js=DIAL_JS) as demo:
         gr.Markdown(