flux:x-theme 是 Flux Pro Max 提供的主题切换组件，允许用户在页面中选择强调色和基础色。点击“保存”后主题会全站立即生效，并将配置持久化存储到 localStorage。
该组件复用了 fluxui.dev/themes 的主题生成逻辑，支持 19 种强调色和 5 种基础色的组合，提供与官方主题构建器一致的体验。
可以通过 props 自定义触发按钮的文本、图标、变体和尺寸：
{{-- 自定义按钮样式 --}}
<flux:x-theme
button-text="切换主题"
button-variant="primary"
button-icon="paint-brush"
button-size="base"
/>
{{-- 简洁样式 --}}
<flux:x-theme
button-text="配色"
button-variant="ghost"
button-icon="sparkles"
/>当你想把主题入口放在 flux:navmenu.item / flux:navbar.item 中时，不建议直接嵌套 <flux:x-theme />，因为组件内部会渲染按钮，容易造成 button 嵌套，导致样式异常。
推荐做法：隐藏组件触发按钮，仅渲染 modal，然后用导航项点击触发 modal-show 事件打开。
{{-- 导航里使用主题组件（推荐） --}}
{{-- 1) 导航项负责触发打开 --}}
<flux:navbar.item
icon="swatch"
x-data
x-on:click.prevent="document.dispatchEvent(new CustomEvent('modal-show', { detail: { name: 'docs-nav-theme' } }))"
>主题</flux:navbar.item>
{{-- 2) x-theme 仅提供 modal（隐藏触发按钮） --}}
<flux:x-theme name="docs-nav-theme" :hide-trigger="true" />如果页面中有多个主题组件实例，可以通过 name 属性避免冲突：
<flux:x-theme name="header-theme" button-text="顶部主题" />
<flux:x-theme name="sidebar-theme" button-text="侧边主题" />组件支持以下颜色选项：
|
参数
|
类型
|
默认值
|
说明
|
|---|---|---|---|
| name | string | flux-pro-max-theme | Modal 的唯一标识，用于区分多个实例 |
| hide-trigger | boolean | false | 隐藏组件自带触发按钮，仅渲染主题设置弹框（modal）。常用于导航菜单中：先放置 <flux:x-theme name="..." :hide-trigger="true" />，再用 modal-show 事件从外部按钮打开，避免按钮嵌套导致样式异常。 |
| button-text | string | 主题 | 触发按钮的文本 |
| button-variant | string | subtle | 按钮变体（primary, subtle, ghost 等） |
| button-icon | string | swatch | 按钮图标名称（Heroicons） |
| button-size | string | sm | 按钮尺寸（xs, sm, base） |
组件通过以下步骤实现全站主题切换：