Components
ThemeToggle 主题切换开关
开箱即用的主题明暗切换开关，已封装 Sun / Moon 图标、aria-label 状态播报，支持图标按钮、下拉选择以及系统偏好三态轮换模式，可直接嵌入 Navbar 顶栏。
基础图标切换按钮
默认非受控模式，自动与全局 useTheme() 同步并持久化，支持深浅模式互切。
<ThemeToggle size="sm" />
<ThemeToggle size="md" />
<ThemeToggle size="lg" />循环系统偏好 (cycleSystem)
开启 cycleSystem 后，点击将在「浅色 -> 深色 -> 跟随系统」三态之间循环轮播。
点击查看 tooltip 或 aria-label 提示的三态轮换
<ThemeToggle cycle-system size="md" />下拉选择变体 (variant=dropdown)
以规范的下拉菜单形式明确选择浅色、深色或跟随系统。
<ThemeToggle variant="dropdown" size="md" />API 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'button' | 'dropdown' | 'button' | 外观形式，提供按钮式或下拉选择式。 |
size | 'sm' | 'md' | 'lg' | 'md' | 控件尺寸。 |
modelValue | ThemeMode | undefined | 受控模式下的主题值（v-model）。留空则使用全局 useTheme()。 |
cycleSystem | boolean | false | 按钮点击是否在 light -> dark -> system 之间三态循环。 |
ariaLabel | string | undefined | 自定义无障碍 aria-label 标签。 |
@change | (mode: ThemeMode) => void | — | 主题改变事件。 |