FxThemeButton 主题切换按钮
太阳/月亮 SVG 图标按钮，点击切换亮/暗主题。内置 View Transition 过渡动画（圆形扩散），不支持时自动降级。
基础用法
vue
<FxThemeButton :dark="false" />1
vue
<script setup lang="ts">
import { FxThemeButton } from "@fx/layouts"
const isDark = ref(false)
</script>
<template>
<FxThemeButton :dark="isDark" @toggle="isDark = !isDark" />
</template>1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dark | 当前是否暗色主题 | boolean | —（必填） |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| toggle | 点击请求翻转主题（组件内已用 View Transition 包裹） | () |
注意事项
- 消费方需自行管理主题状态（如 store +
html.darkclass 切换） - 遵循
prefers-reduced-motion，开启系统降级动画时跳过过渡