ThemeEditor 主题编辑器

实时编辑 --oas-* 主题 token：颜色 token 用颜色选择器、数字 token 用数字输入框（去单位显示、写回带原单位），编辑即时写入宿主 CSS 变量，子树实时继承预览。默认按颜色 / 字号 / 间距 / 圆角 / 控件高度分组展示。

默认 token 集

展示主题默认 token 全集（对应 @oas-isui/theme 的语义 token），变量不存在时自动跳过。

默认 token 集

示例代码

与 ConfigProvider 打通

编辑器位于 <oas-config-provider> 内部时，写入目标切换为最近 provider 元素——整个子树（含 Shadow DOM）实时继承编辑后的 token。右侧按钮可切换 provider 深色主题，验证编辑值仍覆盖在主题之上。

ConfigProvider 子树实时预览

主色按钮主色标签切换深色主题

示例代码

自定义 token 列表

token 属性传 JSON 字符串数组（CSS 变量名），只编辑指定 token；未在当前页面定义的变量自动跳过。

自定义 token

示例代码

导出与重置

调用 exportJson() 获取当前 token 集 JSON；reset() 清除编辑器写入的内联变量，恢复默认主题值。

导出主题 JSON / 重置

导出主题 JSON重置编辑器

点击「导出主题 JSON」查看结果

示例代码

API

属性

属性	说明	类型	默认值
token	自定义要编辑的 token 列表（CSS 变量名）	—	—

事件

事件	说明
oas-change	编辑任一 token，detail: { token, value }

方法	说明
exportJson()	返回当前 token 集 { '--oas-*': value }
reset()	清除编辑器写入宿主的内联 CSS 变量，恢复默认主题值

行为：token 从宿主（或最近 oas-config-provider）computed style 读取；编辑即时 style.setProperty 写回宿主，子树实时继承；位于 config-provider 内部时写入最近 provider（整个子树继承）。颜色输入只接受十六进制 #rrggbb，非十六进制当前值仅展示不进入取色器；数字输入空值/非法值不写入不派发。