Theme
The Theme component is used to change the theme of the application. The Theme can be set directly in the rx.App.
Theme Panel
The ThemePanel component is a container for the Theme component. It provides a way to change the theme of the application.
The theme panel is closed by default. You can set it open 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 | Description |
|---|---|---|
has_background | bool | Whether to apply the themes background color to the theme node. |
appearance | "inherit""light""dark" | Override light or dark mode theme: "inherit" | "light" | "dark". |
accent_color | "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 | "gray""mauve""slate""sage""olive""sand""auto" | The shade of gray, defaults to "auto". |
panel_background | "solid""translucent" | Whether panel backgrounds are translucent: "solid" | "translucent" (default). |
radius | "none""small""medium""large""full" | Element border radius: "none" | "small" | "medium" | "large" | "full". |
scaling | "90%""95%""100%""105%""110%" | Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%". |
Event Triggers
See the full list of default event triggersrx.theme_panel
Visual editor for creating and editing themes.
Include as a child component of Theme to use in your app.
Props
| Prop | Type | Description |
|---|---|---|
default_open | bool | Whether the panel is open. |