在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。