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.

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.

str | None

default:"None"

Hugging Face token. Only needed to download private themes.

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.

str

required

The filepath to read.

Theme

A Theme instance loaded from the file.

from_dict

Theme.from_dict(theme)

Create a theme instance from a dictionary representation.

dict[str, dict[str, str]]

required

The dictionary representation of the theme.

Theme

A Theme instance.

to_dict

theme.to_dict()

Convert the theme into a Python dictionary.

dict

Dictionary representation of the theme.

dump

theme.dump(filename)

Write the theme to a JSON file.

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

Core Classes

Events

Helpers

Themes

Theme

Methods

from_hub

Example

load

from_dict

to_dict

dump

Built-in Themes

Base

Default

Soft

Monochrome

Glass

Origin

Citrus

Ocean

Custom Themes

Theme Variables

Color Variables

Size Variables

Font Variables

Example: Using a Custom Theme

Example: Loading from Hub

Notes

​Theme

​Methods

​from_hub

​Example

​load

​from_dict

​to_dict

​dump

​Built-in Themes

​Base

​Default

​Soft

​Monochrome

​Glass

​Origin

​Citrus

​Ocean

​Custom Themes

​Theme Variables

​Color Variables

​Size Variables

​Font Variables

​Example: Using a Custom Theme

​Example: Loading from Hub

​Notes

Theme

Methods

from_hub

Example

load

from_dict

to_dict

dump

Built-in Themes

Base

Default

Soft

Monochrome

Glass

Origin

Citrus

Ocean

Custom Themes

Theme Variables

Color Variables

Size Variables

Font Variables

Example: Using a Custom Theme

Example: Loading from Hub

Notes