Kasualdad commited on
Commit
f06ecc7
·
1 Parent(s): e9a7197

Fix dark mode at root: body_text_color #1A1A1A -> #F0F0F0

Browse files

The 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.

Files changed (1) hide show
  1. app.py +2 -2
app.py CHANGED
@@ -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="#1A1A1A",
748
- body_text_color_dark="#1A1A1A",
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",