Fix dark mode at root: body_text_color #1A1A1A -> #F0F0F0
Browse filesThe real problem was at the theme level. Gradio's Soft theme generates
dark component backgrounds from the neutral color scale:
--background-fill-primary: var(--neutral-950) → #0b0f19 (near black)
--input-background-fill: var(--neutral-700) → #374151 (dark gray)
--block-background-fill: var(--neutral-800) → #1f2937
But body_text_color was set to #1A1A1A. Svelte-rendered components
(dataframe cells, dropdown items) read color: var(--body-text-color)
directly via scoped class names that our .gr-* selectors can't match.
Dark component backgrounds + dark body text = unreadable.
Fix: set body_text_color to off-white (#F0F0F0) at the theme level.
Light surfaces (headers, prose, footer) already have explicit CSS rules
with color: var(--ink), so they stay dark.
|
@@ -744,8 +744,8 @@ soft_mono = gr.themes.Soft(
|
|
| 744 |
).set(
|
| 745 |
body_background_fill="#FAFAFA",
|
| 746 |
body_background_fill_dark="#FAFAFA",
|
| 747 |
-
body_text_color="#
|
| 748 |
-
body_text_color_dark="#
|
| 749 |
body_text_size="16px",
|
| 750 |
button_primary_background_fill="#1A1A1A",
|
| 751 |
button_primary_background_fill_hover="#000000",
|
|
|
|
| 744 |
).set(
|
| 745 |
body_background_fill="#FAFAFA",
|
| 746 |
body_background_fill_dark="#FAFAFA",
|
| 747 |
+
body_text_color="#F0F0F0",
|
| 748 |
+
body_text_color_dark="#F0F0F0",
|
| 749 |
body_text_size="16px",
|
| 750 |
button_primary_background_fill="#1A1A1A",
|
| 751 |
button_primary_background_fill_hover="#000000",
|