Fix dark theme

app.py

@@ -35,6 +35,45 @@ LANGUAGE_OPTIONS = [
     ("Vietnamese", "vi"),
 ]
 LANGUAGE_LABELS = {code: label for label, code in LANGUAGE_OPTIONS}
+APP_THEME = gr.themes.Soft(
+    primary_hue="orange",
+    secondary_hue="amber",
+    neutral_hue="stone",
+    font=[gr.themes.GoogleFont("Manrope"), "ui-sans-serif", "system-ui", "sans-serif"],
+).set(
+    body_background_fill="#fff7ed",
+    body_background_fill_dark="#fff7ed",
+    body_text_color="#6b4f3f",
+    body_text_color_dark="#6b4f3f",
+    body_text_color_subdued="#7c6558",
+    body_text_color_subdued_dark="#7c6558",
+    block_background_fill="#fffaf0",
+    block_background_fill_dark="#fffaf0",
+    block_border_color="rgba(194, 65, 12, 0.14)",
+    block_border_color_dark="rgba(194, 65, 12, 0.14)",
+    block_label_text_color="#7c2d12",
+    block_label_text_color_dark="#7c2d12",
+    input_background_fill="#fffdf7",
+    input_background_fill_dark="#fffdf7",
+    input_border_color="rgba(194, 65, 12, 0.18)",
+    input_border_color_dark="rgba(194, 65, 12, 0.18)",
+    button_primary_background_fill="#ea580c",
+    button_primary_background_fill_dark="#ea580c",
+    button_primary_background_fill_hover="#f97316",
+    button_primary_background_fill_hover_dark="#f97316",
+    button_primary_text_color="#fff7ed",
+    button_primary_text_color_dark="#fff7ed",
+    button_secondary_background_fill="#fffaf0",
+    button_secondary_background_fill_dark="#fffaf0",
+    button_secondary_background_fill_hover="#fff1e6",
+    button_secondary_background_fill_hover_dark="#fff1e6",
+    button_secondary_text_color="#7c2d12",
+    button_secondary_text_color_dark="#7c2d12",
+    button_secondary_border_color="rgba(194, 65, 12, 0.14)",
+    button_secondary_border_color_dark="rgba(194, 65, 12, 0.14)",
+    link_text_color="#c2410c",
+    link_text_color_dark="#c2410c",
+)
 
 
 class TranscriptionError(Exception):
@@ -339,7 +378,7 @@ with gr.Blocks(
                 sanitize_html=False,
             )
 
-        with gr.Accordion("How to use", open=False, elem_classes="panel"):
+        with gr.Accordion("How to use", open=False, elem_classes=["panel", "guide-panel"]):
             gr.Markdown(
                 "1. Record audio with your microphone or upload a file.\n"
                 "2. Select the language spoken in the clip.\n"
@@ -443,7 +482,7 @@ with gr.Blocks(
                 api_name="transcribe",
             )
 
-        with gr.Column(elem_classes="panel"):
+        with gr.Column(elem_classes=["panel", "example-panel"]):
             gr.Markdown('<div class="example-heading">Examples</div>', sanitize_html=False)
             gr.Markdown(examples_copy, elem_classes="section-copy")
             gr.Markdown(examples_source_copy, elem_classes="example-source")
@@ -474,11 +513,6 @@ demo.queue(default_concurrency_limit=4)
 
 if __name__ == "__main__":
     demo.launch(
-        theme=gr.themes.Soft(
-            primary_hue="orange",
-            secondary_hue="amber",
-            neutral_hue="stone",
-            font=[gr.themes.GoogleFont("Manrope"), "ui-sans-serif", "system-ui", "sans-serif"],
-        ),
+        theme=APP_THEME,
         css_paths="style.css",
     )

style.css

@@ -1,15 +1,26 @@
 :root {
+  --page-fill: #fff7ed;
+  --page-accent-left: rgba(249, 115, 22, 0.15);
+  --page-accent-right: rgba(251, 146, 60, 0.14);
   --surface-border: rgba(234, 88, 12, 0.22);
   --surface-fill: rgba(255, 247, 237, 0.84);
   --surface-shadow: 0 22px 52px rgba(124, 45, 18, 0.12);
   --hero-fill: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(249, 115, 22, 0.1));
+  --title-color: #9a3412;
+  --copy-color: #6b4f3f;
+  --muted-copy-color: #78716c;
+  --link-color: #c2410c;
+  --example-button-fill: rgba(255, 247, 237, 0.92);
+  --example-button-border: rgba(194, 65, 12, 0.18);
+  --example-button-text: #7c2d12;
 }
 
 .gradio-container {
+  color-scheme: light;
   background:
-    radial-gradient(circle at top left, rgba(249, 115, 22, 0.15), transparent 28%),
-    radial-gradient(circle at top right, rgba(251, 146, 60, 0.14), transparent 26%),
-    #fff7ed;
+    radial-gradient(circle at top left, var(--page-accent-left), transparent 28%),
+    radial-gradient(circle at top right, var(--page-accent-right), transparent 26%),
+    var(--page-fill);
 }
 
 .app-shell {
@@ -26,14 +37,14 @@
   box-shadow: var(--surface-shadow);
 }
 
-.hero h1 {
+.gradio-container .hero h1 {
   font-weight: 800;
   letter-spacing: -0.03em;
-  color: #9a3412;
+  color: var(--title-color) !important;
 }
 
-.hero h1,
-.hero p {
+.gradio-container .hero h1,
+.gradio-container .hero p {
   margin: 0;
 }
 
@@ -41,6 +52,15 @@
   margin-top: 0.85rem;
 }
 
+.gradio-container .hero p,
+.gradio-container .hero a {
+  color: var(--copy-color) !important;
+}
+
+.gradio-container .hero a {
+  text-decoration-color: currentColor;
+}
+
 .panel {
   border: 1px solid var(--surface-border);
   border-radius: 22px;
@@ -50,6 +70,34 @@
   backdrop-filter: blur(12px);
 }
 
+.gradio-container .panel .prose,
+.gradio-container .panel .prose p,
+.gradio-container .panel .prose h1,
+.gradio-container .panel .prose h2,
+.gradio-container .panel .prose h3,
+.gradio-container .panel label,
+.gradio-container h3 {
+  color: var(--copy-color) !important;
+}
+
+.gradio-container h3 {
+  margin-bottom: 0.75rem;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--title-color) !important;
+}
+
+.guide-panel button,
+.guide-panel [role="button"],
+.guide-panel summary {
+  color: var(--title-color) !important;
+  font-weight: 600;
+}
+
+.guide-panel .prose p {
+  color: var(--copy-color) !important;
+}
+
 .status-banner {
   border: 1px solid rgba(194, 65, 12, 0.3);
   border-radius: 18px;
@@ -66,19 +114,80 @@
   font-size: 1.5rem;
   font-weight: 800;
   letter-spacing: -0.02em;
-  color: #9a3412;
+  color: var(--title-color) !important;
 }
 
 .example-source p {
   margin-top: 0.35rem;
   margin-bottom: 0.85rem;
   font-size: 0.82rem;
-  color: #78716c;
+  color: var(--muted-copy-color) !important;
 }
 
 .compact-note {
   font-size: 0.92rem;
-  color: #6b4f3f;
+  color: var(--copy-color) !important;
+}
+
+.gradio-container .section-copy p {
+  color: var(--copy-color) !important;
+}
+
+.gradio-container .prose code,
+.gradio-container .section-copy code,
+.gradio-container .example-source code,
+.gradio-container code:not(pre code) {
+  display: inline-block;
+  border: 1px solid rgba(194, 65, 12, 0.18) !important;
+  border-radius: 0.45rem !important;
+  background: #fff1e6 !important;
+  color: #9a3412 !important;
+  padding: 0.08rem 0.35rem !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  font-weight: 600;
+}
+
+.gradio-container .prose code::before,
+.gradio-container .prose code::after,
+.gradio-container .section-copy code::before,
+.gradio-container .section-copy code::after,
+.gradio-container .example-source code::before,
+.gradio-container .example-source code::after,
+.gradio-container code:not(pre code)::before,
+.gradio-container code:not(pre code)::after {
+  content: none !important;
+}
+
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+  color: var(--copy-color) !important;
+}
+
+.gradio-container input::placeholder,
+.gradio-container textarea::placeholder {
+  color: #a78b7a !important;
+  opacity: 1;
+}
+
+.gradio-container .example-panel button,
+.gradio-container .example-panel [role="button"] {
+  background: var(--example-button-fill) !important;
+  border: 1px solid var(--example-button-border) !important;
+  color: var(--example-button-text) !important;
+}
+
+.gradio-container .example-panel button span,
+.gradio-container .example-panel [role="button"] span,
+.gradio-container .example-panel button * ,
+.gradio-container .example-panel [role="button"] * {
+  color: inherit !important;
+}
+
+.gradio-container .example-panel button:hover,
+.gradio-container .example-panel [role="button"]:hover {
+  background: rgba(255, 237, 213, 0.96) !important;
 }
 
 .gradio-container .gr-button-primary {