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

0 0 投票数
Article Rating
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x