Skip to main content

ThemeToggle

Function ThemeToggle 

Source
pub fn ThemeToggle() -> Element
Expand description

主题切换按钮组件(三态循环:Light → Dark → System → Light)。

点击后立即切换图标(theme.set 不再延迟),让用户即时获得反馈; 图标自身的进入动画(缩放+淡入)由 CSS .theme-toggle svg 的 keyframe 驱动,配合 SVG 元素的 key 属性——theme 变化时 Dioxus 重新挂载 SVG, 进入动画随之重新触发。

仅当实际生效明暗(ResolvedTheme)因切换而翻转时,才额外触发圆形展开 VT 动画(颜色过渡);明暗不变时(如 Light → System 且系统浅色)只换图标。