> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.theme
  - rx.theme_panel
---

# Theme

The `Theme` component is used to change the theme of the application. The `Theme` can be set directly in the rx.App.

```python
app = rx.App(
    theme=rx.theme(
        appearance="light", has_background=True, radius="large", accent_color="teal"
    )
)
```

# Theme Panel

The `ThemePanel` component is a container for the `Theme` component. It provides a way to change the theme of the application.

```python
rx.theme_panel()
```

The theme panel is closed by default. You can set it open `default_open=True`.

```python
rx.theme_panel(default_open=True)
```

## API Reference

### rx.theme

A theme provider for radix components.

This should be applied as `App.theme` to apply the theme to all radix
components in the app with the given settings.

It can also be used in a normal page to apply specified properties to all
child elements as an override of the main theme.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `has_background` | bool | `True` | Whether to apply the themes background color to the theme node. |
| `appearance` | Literal["inherit", "light", "dark"] | `"inherit"` | Override light or dark mode theme: "inherit", "light", "dark". |
| `accent_color` | Literal["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "brown", "orange", "sky", "mint", "lime", "yellow", "amber", "gold", "bronze", "gray"] | - | The color used for default buttons, typography, backgrounds, etc. |
| `gray_color` | Literal["gray", "mauve", "slate", "sage", "olive", "sand", "auto"] | - | The shade of gray, defaults to "auto". |
| `panel_background` | Literal["solid", "translucent"] | - | Whether panel backgrounds are translucent: "solid", "translucent" (default). |
| `radius` | Literal["none", "small", "medium", "large", "full"] | `"medium"` | Element border radius: "none", "small", "medium", "large", "full". |
| `scaling` | Literal["90%", "95%", "100%", "105%", "110%"] | `"100%"` | Scale of all theme items: "90%", "95%", "100%", "105%", "110%". |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.theme_panel

Visual editor for creating and editing themes.

Include as a child component of Theme to use in your app.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `default_open` | bool | `False` | Whether the panel is open. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/