Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Theming

/

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"
    )
)

API Reference

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.

Prop	Type	Description
`has_background`	bool	Whether to apply the themes background color to the theme node. Defaults to True.
`appearance`	Literal	Override light or dark mode theme: "inherit" \| "light" \| "dark". Defaults to "inherit".
`accent_color`	Literal	The color used for default buttons, typography, backgrounds, etc
`gray_color`	Literal	The shade of gray, defaults to "auto".
`panel_background`	Literal	Whether panel backgrounds are translucent: "solid" \| "translucent" (default)
`radius`	Literal	Element border radius: "none" \| "small" \| "medium" \| "large" \| "full". Defaults to "medium".
`scaling`	Literal	Scale of all theme items: "90%" \| "95%" \| "100%" \| "105%" \| "110%". Defaults to "100%"

Event Triggers

See the full list of default event triggers

← Tooltip ThemePanel →

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Theme

API Reference

Theme