Reflex应用程序主题化

在Reflex v0.4.0版本中，您可以轻松地为您的Reflex应用程序主题化。这个主题系统是基于Radix Themes库构建的，允许您设置默认的明亮和黑暗主题，使所有组件具有统一的颜色外观。

主题组件

要更改应用程序的主题，您可以使用Theme组件。可以通过以下方式设置主题：

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

可配置属性

在rx.theme组件中，可以传递以下属性：

• has_background (Bool): 是否将主题的背景颜色应用于主题节点，默认为True。
• appearance (“inherit” | “light” | “dark”): 主题的外观，可以是“light”或“dark”，默认为“light”。
• accent_color (Str): 用于默认按钮、排版、背景等的主要颜色。
• gray_color (Str): 用于默认按钮、排版、背景等的次要颜色。
• panel_background (“solid” | “translucent”): 面板背景是否为半透明，默认为“translucent”。
• radius (“none” | “small” | “medium” | “large” | “full”): 主题的圆角，可以是“small”、“medium”或“large”，默认为“medium”。
• scaling (“90%” | “95%” | “100%” | “105%” | “110%”): 所有主题项的缩放比例。

颜色方案

组件的颜色方案继承自主题中指定的颜色。这意味着如果您更改主题，组件的颜色也会相应更改。您还可以使用color_scheme属性来指定颜色方案。

颜色阴影

如果您想使用主题中特定颜色的特定阴影，这是推荐的做法，因为它会在主题变化时自动调整。您可以使用rx.color来访问特定颜色的阴影。阴影可以通过颜色名称和阴影编号访问，阴影编号范围从1到12，并且可以通过True参数设置其alpha值（默认为False）。

手动切换外观

要手动切换明亮和黑暗模式，您可以使用toggle_color_mode，并选择所需的事件触发器：

from reflex.style import toggle_color_mode

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

条件渲染外观

您可以使用rx.color_mode_cond组件，根据应用程序是处于明亮模式还是黑暗模式渲染不同的组件。

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

通过这些功能，您可以创建一个美观且响应式的主题，使用户体验更加流畅。

如需更多详细信息，请访问Reflex Theming Documentation。