gradio_themes.md

Gradio 6.0 Theming Guide

Key Change in Gradio 6.0

In Gradio 6.0, the theme, css, and css_paths parameters have moved from the Blocks() constructor to the launch() method.

Old Way (Gradio 5.x)

with gr.Blocks(theme=gr.themes.Soft()) as demo:
    # components
    pass
demo.launch()

New Way (Gradio 6.0+)

with gr.Blocks() as demo:
    # components
    pass
demo.launch(theme=gr.themes.Soft())

---

1. Built-in Themes

Gradio 6.0 includes 5 prebuilt themes:

import gradio as gr

with gr.Blocks() as demo:
    # your components
    pass

# Choose one of these themes
demo.launch(theme=gr.themes.Base())
demo.launch(theme=gr.themes.Default())
demo.launch(theme=gr.themes.Glass())
demo.launch(theme=gr.themes.Monochrome())
demo.launch(theme=gr.themes.Soft())

---

2. Customizing Built-in Themes

Basic Customization

Customize colors, fonts, and sizing:

theme = gr.themes.Soft(
    primary_hue="blue",       # Main accent color (buttons, links)
    secondary_hue="cyan",     # Secondary elements
    neutral_hue="slate",      # Text and backgrounds
    font="Inter, system-ui, sans-serif",
    font_mono="Fira Code, monospace"
)

demo.launch(theme=theme)

Available Color Names

slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Sizing Options

theme = gr.themes.Soft(
    spacing_size=gr.themes.sizes.spacing_lg,    # Spacing/padding
    radius_size=gr.themes.sizes.radius_md,      # Corner roundness
    text_size=gr.themes.sizes.text_md           # Font size
)

Available sizes:

• Spacing: spacing_sm, spacing_md, spacing_lg
• Radius: radius_none, radius_sm, radius_md, radius_lg
• Text: text_sm, text_md, text_lg

---

3. Advanced Theme Customization

Using .set() for CSS Variables

theme = gr.themes.Soft(
    primary_hue="indigo",
    secondary_hue="cyan"
).set(
    # Button styling
    button_primary_background_fill="*primary_500",
    button_primary_background_fill_hover="*primary_600",
    button_primary_text_color="white",

    # Slider colors
    slider_color="*secondary_500",

    # Loader/spinner color
    loader_color="*primary_400",

    # Background gradients
    body_background_fill="linear-gradient(to bottom, #f0f0f0, #ffffff)",

    # Borders
    border_color_primary="*primary_300",
)

demo.launch(theme=theme)

---

4. Custom CSS

Inline CSS String

custom_css = """
.gradio-container {
    font-family: 'Inter', system-ui, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.my-custom-button {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
}

/* Override default styles with !important if needed */
.gr-button {
    border-radius: 8px !important;
}
"""

demo.launch(
    theme=gr.themes.Soft(),
    css=custom_css
)

External CSS Files

from pathlib import Path

demo.launch(
    theme=gr.themes.Soft(),
    css_paths=[
        Path("styles/main.css"),
        Path("styles/custom.css")
    ]
)

---

5. Complete Example

Full Implementation with Theme and Custom CSS

import gradio as gr

# Build your interface
with gr.Blocks(title="My App") as demo:
    gr.Markdown("# My Custom Themed App")

    with gr.Row():
        input_text = gr.Textbox(label="Input", elem_classes="custom-input")
        output_text = gr.Textbox(label="Output")

    submit_btn = gr.Button("Submit", variant="primary", elem_classes="custom-button")

def main():
    # Create custom theme
    theme = gr.themes.Soft(
        primary_hue="blue",
        secondary_hue="cyan",
        neutral_hue="slate",
        spacing_size=gr.themes.sizes.spacing_md,
        radius_size=gr.themes.sizes.radius_lg,
        font="Inter, system-ui, sans-serif"
    ).set(
        button_primary_background_fill="*primary_600",
        button_primary_background_fill_hover="*primary_700",
        slider_color="*secondary_500"
    )

    # Custom CSS
    custom_css = """
    .gradio-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .custom-button {
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

    .custom-input textarea {
        border: 2px solid #e5e7eb !important;
        border-radius: 8px !important;
    }
    """

    # Launch with theme and CSS
    demo.launch(
        share=False,
        inbrowser=True,
        theme=theme,
        css=custom_css
    )

if __name__ == "__main__":
    main()

---

6. Theme Constructor Parameters

All Available Parameters

gr.themes.Soft(
    # Colors (use color names or gr.themes.colors objects)
    primary_hue="blue",           # Main accent color
    secondary_hue="cyan",         # Secondary elements
    neutral_hue="slate",          # Text and backgrounds

    # Sizing
    spacing_size=gr.themes.sizes.spacing_md,
    radius_size=gr.themes.sizes.radius_md,
    text_size=gr.themes.sizes.text_md,

    # Fonts
    font="system-ui, sans-serif",
    font_mono="monospace"
)

---

7. Tips and Best Practices

General Tips

1. Use !important in custom CSS - Gradio's default styles may need to be overridden
2. Base class is .gradio-container - Target this for app-wide styling
3. Query selectors are not guaranteed - Gradio's internal structure may change between versions
4. Test your theme - Colors may appear differently on different displays

Debugging CSS

# Add borders to see element boundaries
custom_css = """
* {
    border: 1px solid red !important;
}
"""

Performance

• Keep CSS minimal for faster loading
• Use CSS files for large stylesheets instead of inline strings
• Avoid complex selectors and deep nesting

---

8. Common Styling Use Cases

Dark Mode

theme = gr.themes.Monochrome(
    neutral_hue="slate"
).set(
    body_background_fill="#1a1a1a",
    body_text_color="#ffffff",
    input_background_fill="#2d2d2d",
    button_primary_background_fill="#4a9eff"
)

Compact Layout

theme = gr.themes.Soft(
    spacing_size=gr.themes.sizes.spacing_sm,
    radius_size=gr.themes.sizes.radius_sm,
    text_size=gr.themes.sizes.text_sm
)

Colorful/Vibrant

theme = gr.themes.Soft(
    primary_hue="pink",
    secondary_hue="purple"
).set(
    button_primary_background_fill="linear-gradient(90deg, #667eea 0%, #764ba2 100%)"
)

Professional/Corporate

theme = gr.themes.Default(
    primary_hue="blue",
    secondary_hue="slate",
    neutral_hue="gray"
).set(
    body_background_fill="#ffffff",
    button_primary_background_fill="#0066cc",
    border_color_primary="#d1d5db"
)

---

Resources

• Gradio Custom CSS and JS Guide
• Gradio 6 Migration Guide
• Gradio Theming Guide
• Gradio Themes Documentation
• Gradio Blocks Documentation

---

Version Information

• This guide is for Gradio 6.0+
• For Gradio 5.x and earlier, themes are set in the Blocks() constructor instead of launch()
• Check your Gradio version: python -c "import gradio; print(gradio.__version__)"