来源：https://ui.docs.xihanfun.com/design/theme-designer

# 主题设计器

从一套预设出发，或者自己挑品牌色，再定明暗、密度、对比度与圆角，下方整面真实组件随之实时变化；满意后复制最下面的 CSS 与接入代码放进项目。设置只保存在当前浏览器里。

<XhThemeDesigner />

## 能改什么

| 设置 | 改的是 | 项目里怎么用 |
| --- | --- | --- |
| 品牌色 | 由种子色派生的整套 `--xh-color-brand-50…950` 原语 | 导出的 `[data-brand]` 取值块，或运行时 `registerBrand` |
| 明暗 | `data-theme` | 视觉环境控制器的 `mode` |
| 密度 | `data-density` | 控制器的 `density` |
| 对比度 | `data-contrast` | 控制器的 `contrast` |
| 圆角 | 原始阶梯 `--xh-radius-sm / md / lg` | 导出的 `:root` 覆盖 |

预设只是上面五项的一组取值，选中后照样可以逐项微调；与哪套预设完全一致，哪套就显示为选中。

品牌色只取种子的色相与彩度，明度曲线沿用基线，所以换任何种子，语义层（实心按钮、链接、选中态）的对比度保证都不变；种子本身的明暗不会被原样搬进来。圆角改的是原始阶梯，控件、表面、浮层三档形状语义跟着走，组件之间的层次关系保持不变：

| 圆角 | `--xh-radius-sm / md / lg` | 控件 / 表面 / 浮层 |
| --- | --- | --- |
| 方正 | 0 / 2 / 4px | 0 / 2 / 2px |
| 默认 | 2 / 4 / 8px（令牌缺省，不导出覆盖） | 2 / 4 / 4px |
| 圆润 | 4 / 8 / 12px | 4 / 8 / 8px |

控件与内层取 sm，表面与浮层取 md；lg 不进形状令牌，留给作者直接取用。

## 接入

把「CSS」一栏放进全局样式，或者只用「TypeScript」一栏在运行时注册品牌：两者给出的品牌色是同一套。明暗、密度与对比度属于视觉环境，按[设计令牌与主题](../guide/theme#八轴视觉环境运行时)里的控制器提交，Vue 与 React 也可以经 `XhConfigProvider` 传入。

预览区本身就是一个局部视觉环境：它用 `XhConfigProvider` 的同一套机制把设置写到自己的根元素上，下拉、日期面板这类渲染到预览区之外的浮层也会带上同样的设置。项目里把控制器挂在根元素上，整站随之生效。