> ## 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.

# Themes

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

## Theme

```python theme={null}
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

```python theme={null}
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.

<ParamField path="repo_name" type="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.
</ParamField>

<ParamField path="token" type="str | None" default="None">
  Hugging Face token. Only needed to download private themes.
</ParamField>

<ResponseField name="returns" type="Theme">
  A Theme instance loaded from the Hub.
</ResponseField>

### Example

```python theme={null}
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

```python theme={null}
Theme.load(path)
```

Load a theme from a JSON file.

<ParamField path="path" type="str" required>
  The filepath to read.
</ParamField>

<ResponseField name="returns" type="Theme">
  A Theme instance loaded from the file.
</ResponseField>

### from\_dict

```python theme={null}
Theme.from_dict(theme)
```

Create a theme instance from a dictionary representation.

<ParamField path="theme" type="dict[str, dict[str, str]]" required>
  The dictionary representation of the theme.
</ParamField>

<ResponseField name="returns" type="Theme">
  A Theme instance.
</ResponseField>

### to\_dict

```python theme={null}
theme.to_dict()
```

Convert the theme into a Python dictionary.

<ResponseField name="returns" type="dict">
  Dictionary representation of the theme.
</ResponseField>

### dump

```python theme={null}
theme.dump(filename)
```

Write the theme to a JSON file.

<ParamField path="filename" type="str" required>
  The path to write the theme to.
</ParamField>

## Built-in Themes

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

### Base

```python theme={null}
gr.themes.Base()
```

The base theme that all other themes inherit from.

### Default

```python theme={null}
gr.themes.Default()
```

The default Gradio theme.

### Soft

```python theme={null}
gr.themes.Soft()
```

A soft, rounded theme with pastel colors.

### Monochrome

```python theme={null}
gr.themes.Monochrome()
```

A minimalist black and white theme.

### Glass

```python theme={null}
gr.themes.Glass()
```

A theme with glassmorphism effects.

### Origin

```python theme={null}
gr.themes.Origin()
```

A theme inspired by the original Gradio design.

### Citrus

```python theme={null}
gr.themes.Citrus()
```

A bright, citrus-colored theme.

### Ocean

```python theme={null}
gr.themes.Ocean()
```

A calm, ocean-inspired theme.

## Custom Themes

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

```python theme={null}
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

```python theme={null}
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

```python theme={null}
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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.