ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Other tools

Theme

rx.themerx.theme_panel

Official docs

Workshop order

Leave the rest of the site as it is, and switch just the event banner box to teal with pill-shaped corners.

rx.theme is the theme provider that sets the colors, corners and size scale of Radix components. You usually apply it once to the whole app, and wrapping something again inside a page overrides the theme for just that part. Every example on this page is such an override, so the rest of the site doesn't change.

rx.theme(
    rx.box(
        rx.button("Teal button"),
        padding="12px",
    ),
    accent_color="teal",
)

Try the props

A single card is wrapped in rx.theme. Change the theme and the button, badge, switch and card all follow at once.

Try the props

Spring sale

Up to 30% off this week.

New

accent_color

gray_color

radius

scaling

panel_background

has_background

rx.theme(
    rx.box(
        rx.card(
            rx.flex(
                rx.heading("Spring sale", size="4"),
                rx.text("Up to 30% off this week.", color_scheme="gray"),
                rx.flex(
                    rx.button("Shop now"),
                    rx.button("Later", variant="soft"),
                    rx.badge("New"),
                    rx.switch(default_checked=True),
                    spacing="3",
                    align="center",
                ),
                direction="column",
                spacing="3",
            ),
        ),
        padding="16px",
    ),
    accent_color="teal",
    gray_color="auto",
    radius="medium",
    scaling="100%",
    panel_background="translucent",
    has_background=True,
)

accent_color is the accent color, gray_color the tint of the grays, radius the corners, scaling the overall size scale. Turn on has_background and the theme area gets a background color.

Prop	Values	Default	Use
`accent_color`	26 Radix color names	`"indigo"`	Accent color for buttons, links, switches and so on
`gray_color`	`"gray"` `"mauve"` `"slate"` `"sage"` `"olive"` `"sand"` `"auto"`	`"auto"`	Gray family. auto picks a gray that suits the accent color
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	`"medium"`	Corners of every component
`scaling`	`"90%"` `"95%"` `"100%"` `"105%"` `"110%"`	`"100%"`	Scale of text, spacing and components
`panel_background`	`"solid"` `"translucent"`	`"translucent"`	Whether panels such as cards and menus are see-through
`has_background`	`True` / `False`	`True`	Whether to paint a background color in the theme area
`appearance`	`"inherit"` `"light"` `"dark"`	`"inherit"`	Light or dark mode. Only used at the app level (below)
`default_open` (theme_panel)	`True` / `False`	`False`	Start with the theme panel open

Applying a theme to the whole app

The official docs describe rx.App(theme=rx.theme(...)), but in Reflex 0.10 that argument is marked as a "legacy shortcut", and RadixThemesPlugin(theme=...) in rxconfig.py is the proper place. This site sets accent_color="indigo", gray_color="slate" and radius="large" that way. Since it changes the whole site, it is shown as code only.

# rxconfig.py (Reflex 0.10): the app-wide theme goes to the Radix Themes plugin
import reflex as rx

config = rx.Config(
    app_name="my_app",
    plugins=[
        rx.plugins.RadixThemesPlugin(
            theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
        ),
    ],
)

# The official docs' way; in 0.10 it remains as a deprecated shortcut
app = rx.App(
    theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
)

In the app-level theme, appearance sets the default color mode (light or dark). In 0.10, an appearance given to an rx.theme inside a page is dropped when rendering, so it can't be used to make just part of the page dark.

Overriding just a part

Only what you wrap in rx.theme gets the new theme; anything outside keeps the app theme. Props you don't give are inherited from the outer theme. Styles such as padding given to rx.theme itself are ignored, so put spacing on an inner rx.box.

App theme

Draft

Override

Draft

rx.flex(
    rx.card(
        rx.flex(rx.text("App theme"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
    ),
    rx.theme(
        rx.card(
            rx.flex(rx.text("Override"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
        ),
        accent_color="crimson",
        radius="full",
        has_background=False,
    ),
    spacing="4",
    wrap="wrap",
)

The theme panel

rx.theme_panel() is a theme editor that appears in the top-right corner of the screen. Click through colors and corners to choose, then copy those values into the rx.theme in your code. It starts closed; with default_open=True it starts open. It's a tool that changes the whole site's theme, so on this page it is shown as code only.

rx.theme_panel()                   # theme editor in the top-right corner (starts closed)
rx.theme_panel(default_open=True)  # starts open

rx.theme(rx.text("..."), theme_panel=True)   # shortcut that puts the panel inside the theme

Filling the order

Only the banner box is wrapped in rx.theme, switching it to teal, pill-shaped corners and a slightly larger scale. The callout and button inside follow the theme without being given colors of their own.

Event week: free shipping on every order.

rx.theme(
    rx.box(
        rx.callout("Event week: free shipping on every order.", icon="party-popper"),
        rx.flex(
            rx.button(rx.icon("gift"), "See deals"),
            rx.button("Remind me", variant="outline"),
            spacing="3",
            margin_top="12px",
        ),
        padding="16px",
    ),
    accent_color="teal",
    radius="full",
    scaling="105%",
    has_background=False,
)

Workshop notes

The app-wide theme is RadixThemesPlugin(theme=rx.theme(...)) in rxconfig.py. rx.App(theme=) is a legacy shortcut in 0.10.
An rx.theme inside a page overrides only what it wraps. Values you don't give are inherited.
accent_color, gray_color, radius, scaling, panel_background, has_background.
appearance works only at the app level. Styles given to rx.theme are ignored, so put them on an inner box.
Choose with rx.theme_panel(), then copy the chosen values into your code.

← Previous

HTML elements · SVG

Other tools · Skeleton

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.