Themes

Gradio provides a theming system that allows you to customize the appearance of your applications.

Theme

class Theme

The base Theme class that all Gradio themes inherit from. You can create custom themes by subclassing this class or by loading themes from the Hugging Face Hub.

Methods

from_hub

Theme.from_hub(repo_name, token=None)

Load a theme from the Hugging Face Hub. This does NOT require a HuggingFace account for downloading publicly available themes.

repo_name · str · required

String of the form <author>/<theme-name>@<semantic-version-expression>. If a semantic version expression is omitted, the latest version will be fetched.

token · str | None · default: "None"

Hugging Face token. Only needed to download private themes.

returns · Theme

A Theme instance loaded from the Hub.

Example

import gradio as gr

theme = gr.Theme.from_hub("gradio/monochrome")

with gr.Blocks(theme=theme) as demo:
    gr.Textbox(label="Input")
    gr.Button("Submit")

demo.launch()

load

Theme.load(path)

Load a theme from a JSON file.

path · str · required

The filepath to read.

returns · Theme

A Theme instance loaded from the file.

from_dict

Theme.from_dict(theme)

Create a theme instance from a dictionary representation.

theme · dict[str, dict[str, str]] · required

The dictionary representation of the theme.

returns · Theme

A Theme instance.

to_dict

theme.to_dict()

Convert the theme into a Python dictionary.

returns · dict

Dictionary representation of the theme.

dump

theme.dump(filename)

Write the theme to a JSON file.

filename · str · required

The path to write the theme to.

Built-in Themes

Gradio includes several built-in themes that you can use:

Base

gr.themes.Base()

The base theme that all other themes inherit from.

Default

gr.themes.Default()

The default Gradio theme.

Soft

gr.themes.Soft()

A soft, rounded theme with pastel colors.

Monochrome

gr.themes.Monochrome()

A minimalist black and white theme.

Glass

gr.themes.Glass()

A theme with glassmorphism effects.

Origin

gr.themes.Origin()

A theme inspired by the original Gradio design.

Citrus

gr.themes.Citrus()

A bright, citrus-colored theme.

Ocean

gr.themes.Ocean()

A calm, ocean-inspired theme.

Custom Themes

You can create custom themes by extending the base Theme class:

import gradio as gr

class MyTheme(gr.themes.Base):
    def __init__(self):
        super().__init__()
        # Customize colors
        self.primary_hue = "blue"
        self.secondary_hue = "green"
        self.neutral_hue = "slate"
        
        # Customize sizes
        self.text_size = "md"
        self.spacing_size = "md"
        self.radius_size = "md"

with gr.Blocks(theme=MyTheme()) as demo:
    gr.Textbox(label="Input")
    gr.Button("Submit")

demo.launch()

Theme Variables

Themes support the following customizable variables:

Color Variables

• primary_hue: Primary color hue
• secondary_hue: Secondary color hue
• neutral_hue: Neutral color hue

Size Variables

• text_size: Text size scale
• spacing_size: Spacing size scale
• radius_size: Border radius size scale

Font Variables

• font: Main font family
• font_mono: Monospace font family

Example: Using a Custom Theme

import gradio as gr

# Use a built-in theme
with gr.Blocks(theme=gr.themes.Soft()) as demo:
    gr.Markdown("# My App")
    with gr.Row():
        inp = gr.Textbox(placeholder="Enter text here")
        out = gr.Textbox()
    btn = gr.Button("Submit")
    btn.click(lambda x: x.upper(), inp, out)

demo.launch()

Example: Loading from Hub

import gradio as gr

# Load a theme from the Hugging Face Hub
theme = gr.Theme.from_hub("gradio/seafoam")

with gr.Blocks(theme=theme) as demo:
    gr.Markdown("# My Themed App")
    gr.Textbox(label="Input")
    gr.Button("Submit")

demo.launch()

Notes

• Themes are applied to the entire Blocks interface
• You can share custom themes on the Hugging Face Hub
• Theme variables use CSS custom properties under the hood
• Dark mode is automatically supported for all themes