Theme

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

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.

rx.theme_panel()

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

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.
PropType | ValuesDefault
has_background
bool
appearance
"inherit" | "light" | ...
accent_color
"tomato" | "red" | ...
gray_color
"gray" | "mauve" | ...
panel_background
"solid" | "translucent"
radius
"none" | "small" | ...
scaling
"90%" | "95%" | ...

Event Triggers

See the full list of default event triggers

rx.theme_panel

Visual editor for creating and editing themes.

Include as a child component of Theme to use in your app.
PropType | ValuesDefault
default_open
bool