Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt

Use this file to discover all available pages before exploring further.

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

Build docs developers (and LLMs) love

Get started for freeTalk to us