Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

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

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.
PropTypeDescriptionValues
has_backgroundbool

Whether to apply the themes background color to the theme node. Defaults to True.

appearanceLiteral

Override light or dark mode theme: "inherit" | "light" | "dark". Defaults to "inherit".

accent_colorLiteral

The color used for default buttons, typography, backgrounds, etc

gray_colorLiteral

The shade of gray, defaults to "auto".

panel_backgroundLiteral

Whether panel backgrounds are translucent: "solid" | "translucent" (default)

radiusLiteral

Element border radius: "none" | "small" | "medium" | "large" | "full". Defaults to "medium".

scalingLiteral

Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%". Defaults to "100%"

Event Triggers

No component specific event triggers

← TooltipThemePanel →

Did you find this useful?