Theming

As of Reflex v0.4.0, you can now theme your Reflex applications. The core of our theming system is directly based on the Radix Themes library. This allows you to easily change the theme of your application along with providing a default light and dark theme. Themes cause all the components to have a unified color appearance.

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

app = rx.App(
    theme=rx.theme(
        appearance="light",
        has_background=True,
        radius="large",
        accent_color="teal",
    )
)

Here are the props that can be passed to the rx.theme component:

Additionally you can modify the theme of your app through using the Theme Panel component which can be found in the Theme Panel docs .

On a high-level, component color_scheme inherits from the color specified in the theme. This means that if you change the theme, the color of the component will also change. Available colors can be found here .

You can also specifiy the color_scheme prop.

rx.flex(
    rx.button(
        "Hello World",
        color_scheme="tomato",
    ),
    rx.button(
        "Hello World",
        color_scheme="teal",
    ),
    spacing="2",
)

Sometime you may want to use a specific shade of a color from the theme. This is recommended vs using a hex color directly as it will automatically change when the theme changes appearance change from light/dark.

To access a specific shade of color from the theme, you can use the rx.color. When switching to light and dark themes, the color will automatically change. Shades can be accessed by using the color name and the shade number. The shade number ranges from 1 to 12. Additionally, they can have their alpha value set by using the True parameter it defaults to False. A full list of colors can be found here .

rx.flex(
    rx.button(
        "Hello World",
        color=rx.color("grass", 1),
        background_color=rx.color("grass", 7),
        border_color=f"1px solid {rx.color('grass', 1)}",
    ),
    spacing="2",
)

You can also use standard hex, rgb, and rgba colors.

rx.flex(
    rx.button(
        "Hello World",
        color="white",
        background_color="#87CEFA",
        border="1px solid rgb(176,196,222)",
    ),
    spacing="2",
)

To toggle between the light and dark mode manually, you can use the toggle_color_mode with the desired event trigger of your choice.

from reflex.style import toggle_color_mode


def index():
    return rx.button(
        "Toggle Color Mode",
        on_click=toggle_color_mode,
    )

To render a different component depending on whether the app is in light mode or dark mode, you can use the rx.color_mode_cond component. The first component will be rendered if the app is in light mode and the second component will be rendered if the app is in dark mode.

rx.color_mode_cond(
    light=rx.image(
        src="/logos/light/reflex.svg", height="4em"
    ),
    dark=rx.image(
        src="/logos/dark/reflex.svg", height="4em"
    ),
)

This can also be applied to props.

rx.button(
    "Hello World",
    color=rx.color_mode_cond(light="black", dark="white"),
    background_color=rx.color_mode_cond(
        light="white", dark="black"
    ),
)