config.py

import gradio as gr


theme = gr.themes.Base(
    primary_hue="purple",
    secondary_hue="violet",
    radius_size="lg",
    font=["Poppins", "ui-sans-serif", "system-ui", "sans-serif"],
).set(
    body_background_fill_dark="hsl(240 10% 3.9%)",
    body_text_color_dark="hsl(0 0% 98%)",
    border_color_primary_dark="hsl(240 3.7% 15.9%)",
    # Input fields
    input_background_fill_dark="hsl(240 10% 3.9%)",
    input_border_color_dark="hsl(240 3.7% 15.9%)",
    # input_text_color_dark="hsl(0 0% 98%)",
    input_placeholder_color_dark="hsl(240 5% 64.9%)",
    input_background_fill_hover_dark="hsl(240 3.7% 15.9%)",
    input_border_color_hover_dark="hsl(240 4.9% 83.9%)",
    input_background_fill_focus_dark="hsl(240 10% 3.9%)",
    input_border_color_focus_dark="hsl(240 4.9% 83.9%)",
    input_shadow_focus_dark="0 0 0 2px hsl(240 4.9% 83.9%)",
    # Labels & text
    block_label_text_color_dark="hsl(240 5% 64.9%)",
    block_title_text_color_dark="hsl(0 0% 98%)",
    block_info_text_color_dark="hsl(240 5% 64.9%)",
    # Blocks & panels
    block_background_fill_dark="hsl(240 10% 3.9%)",
    block_border_color_dark="hsl(240 3.7% 15.9%)",
    panel_background_fill_dark="hsl(240 10% 3.9%)",
    panel_border_color_dark="hsl(240 3.7% 15.9%)",
    # Error states
    error_background_fill_dark="hsl(0 62.8% 30.6%)",
    error_text_color_dark="hsl(0 0% 98%)",
    error_border_color_dark="hsl(0 62.8% 30.6%)",
    # Buttons
    button_primary_background_fill_dark="hsl(0 0% 98%)",
    button_primary_text_color_dark="hsl(240 5.9% 10%)",
    button_primary_background_fill_hover_dark="hsl(0 0% 98% / 0.9)",
    button_secondary_background_fill_dark="*neutral_900",
    button_secondary_text_color_dark="hsl(0 0% 98%)",
    button_secondary_background_fill_hover_dark="hsl(240 3.7% 15.9% / 0.8)",
    button_cancel_background_fill_dark="hsl(0 62.8% 30.6%)",
    button_cancel_text_color_dark="hsl(0 0% 98%)",
    button_cancel_background_fill_hover_dark="hsl(0 62.8% 30.6% / 0.9)",
    # Checkbox
    # Note: has a minor issue when selected and deselected the border color is not updated
    checkbox_background_color_dark="transparent",
    checkbox_border_color_dark="hsl(0 0% 40%)",
    checkbox_border_width_dark="2px",
    checkbox_border_radius="4px",
    checkbox_background_color_hover_dark="hsl(240 3.7% 15.9%)",
    checkbox_border_color_hover_dark="hsl(0 0% 98%)",
    checkbox_background_color_selected_dark="*primary_500",
    checkbox_border_color_selected_dark="*primary_500",
    checkbox_background_color_focus_dark="*primary_500",
    checkbox_border_color_focus_dark="*primary_500",
    checkbox_label_text_color_dark="hsl(0 0% 98%)",
    checkbox_label_text_color_selected_dark="hsl(0 0% 98%)",
    checkbox_label_gap="0.5rem",
    # Note: background for rows w/ panel variant needs to be set here
)