Spaces:
Running on Zero
Running on Zero
| """One dark theme, defined once, used by both the local app and the Space. | |
| Gradio decides light or dark from the visitor's browser unless it is told | |
| otherwise, and an earlier version of this app painted a dark background in CSS | |
| while passing a light theme - so Gradio drew white inputs and the stylesheet | |
| wrote near-white text onto them. Nothing was readable, including the error | |
| toasts that would have explained it. | |
| The fix is to stop having two opinions. Every colour below is set for both the | |
| light and the dark variant, so the page looks the same whichever the browser | |
| asks for, and the stylesheet never has to override a theme colour. | |
| """ | |
| import gradio as gr | |
| INK = "#0b0e14" # page | |
| PANEL = "#141a25" # cards, inputs | |
| RAISED = "#1b2331" # hover, secondary buttons | |
| LINE = "#28324a" # borders | |
| TEXT = "#e9edf7" | |
| DIM = "#94a3bb" | |
| ORANGE = "#f2794a" | |
| ORANGE_HI = "#ff9366" | |
| VIOLET = "#b46cf0" | |
| def _both(**pairs): | |
| """Give light and dark the same value, so mode never changes the look.""" | |
| out = {} | |
| for key, value in pairs.items(): | |
| out[key] = value | |
| out[key + "_dark"] = value | |
| return out | |
| def build(): | |
| theme = gr.themes.Base( | |
| primary_hue=gr.themes.colors.orange, | |
| secondary_hue=gr.themes.colors.purple, | |
| neutral_hue=gr.themes.colors.slate, | |
| font=(gr.themes.GoogleFont("Outfit"), "ui-sans-serif", "system-ui", | |
| "sans-serif"), | |
| font_mono=(gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", | |
| "monospace"), | |
| ) | |
| return theme.set( | |
| **_both( | |
| body_background_fill=INK, | |
| body_text_color=TEXT, | |
| body_text_color_subdued=DIM, | |
| background_fill_primary=INK, | |
| background_fill_secondary=PANEL, | |
| block_background_fill=PANEL, | |
| block_border_color=LINE, | |
| panel_background_fill=PANEL, | |
| panel_border_color=LINE, | |
| border_color_primary=LINE, | |
| border_color_accent=ORANGE, | |
| # Labels as quiet text rather than the theme's default filled | |
| # pills: with ten fields on screen the pills read as ten warnings. | |
| block_label_background_fill="transparent", | |
| block_label_text_color=DIM, | |
| block_title_text_color=DIM, | |
| block_info_text_color=DIM, | |
| input_background_fill=INK, | |
| input_border_color=LINE, | |
| input_border_color_focus=ORANGE, | |
| input_placeholder_color="#5b6780", | |
| button_primary_background_fill=( | |
| f"linear-gradient(96deg, {ORANGE}, #e0603a)"), | |
| button_primary_background_fill_hover=( | |
| f"linear-gradient(96deg, {ORANGE_HI}, {ORANGE})"), | |
| button_primary_text_color="#1a0f08", | |
| button_secondary_background_fill=RAISED, | |
| button_secondary_border_color=LINE, | |
| button_secondary_text_color=TEXT, | |
| link_text_color=ORANGE, | |
| table_odd_background_fill=RAISED, | |
| error_background_fill="#2b1418", | |
| error_text_color="#ffb4a2", | |
| ), | |
| block_label_text_weight="600", | |
| block_title_text_weight="600", | |
| block_label_text_size="*text_sm", | |
| block_label_border_width="0px", | |
| block_border_width="1px", | |
| block_radius="14px", | |
| input_radius="10px", | |
| button_large_radius="12px", | |
| block_shadow="none", | |
| input_shadow="none", | |
| ) | |