主题编辑器

通过下面的交互式面板，你可以实时调整运行时主题令牌、观察组件变化，并导出一份可以复用的主题配置。

主题编辑器

运行时 Token 实验台

在这里可以实时调整主色、圆角和间距等主题令牌。下方预览区与组件库正式发布时使用的是同一套运行时主题控制器，所以即使是 Teleport 到页面外层的浮层，也会和文档一起同步更新。

主题模式

浅色

主题预设

默认

动效偏好

跟随系统

主色

#1890ff

圆角令牌

拖动滑杆微调

圆角 XS

圆角 SM

圆角 MD

圆角 LG

间距令牌

全局节奏

间距 XS

间距 SM

间距 MD

间距 LG

间距 XL

组件预览

按钮、选择器、提示和对话框会同步响应同一套主题令牌变化。

点击上方按钮后，对话框会在这个局部区域里展开，方便直接观察弹层样式。

表格预览

这里集中演示排序、筛选和整表横向滚动时的表现，方便直接检查布局是否协调。

阿尔法

核心

布拉沃

增长

查理

核心

德尔塔

增长

这个预览不会固定首列，横向滚动时整张表会一起移动；固定列能力放在 Table 文档里单独演示。

主题配置 JSON

{
  "mode": "system",
  "preset": "default",
  "primary": "#1890ff",
  "radius": "default",
  "motion": "system",
  "overrides": {}
}

CSS 变量

:root {
  --my-color-primary: #1890ff;
  --my-color-primary-light-1: #38a0ff;
  --my-color-primary-light-2: #59afff;
  --my-color-primary-light-3: #79bfff;
  --my-color-primary-light-4: #9ed0ff;
  --my-color-primary-light-5: #daedff;
  --my-color-primary-dark-1: #157cdb;
  --my-color-primary-dark-2: #1168b8;
  --my-color-primary-dark-3: #0e5494;
  --my-color-primary-dark-4: #0b3f70;
  --my-border-radius-xs: 2px;
  --my-border-radius-sm: 4px;
  --my-border-radius-md: 8px;
  --my-border-radius-lg: 16px;
  --my-spacing-xs: 4px;
  --my-spacing-sm: 8px;
  --my-spacing-md: 16px;
  --my-spacing-lg: 24px;
  --my-spacing-xl: 32px;
  --my-transition-duration-base: 0.2s;
  --my-motion-ripple-duration: 0.6s;
  --my-motion-spin-duration: 1s;
}

主题编辑器 ​

运行时 Token 实验台

主题编辑器