ThemeEditor 主题编辑器

实时编辑 --oas-* 主题 token，编辑即时写入宿主 CSS 变量，子树实时继承预览。颜色 token 行为「色板 + 文本框」双通道（色板只承载 #rrggbb，文本框可编辑 rgb()/oklch()/color-mix() 等任意 CSS 颜色函数且不破坏原值）；数字 token 行为 range 滑块 + number 输入联动。面板顶部支持按 token 名搜索过滤，分组可折叠；内置 compact / comfortable 预设主题与导出 / 导入 / 重置工具。

默认 token 集

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

默认 token 集

示例代码

颜色函数值编辑

颜色 token 行 = 色板 + 文本框双通道：

• 色板只承载可解析为 #rrggbb 的值——rgb()/oklch() 等颜色函数自动转为对应 hex 显示，不再回落黑色
• 文本框始终可编辑原始值（任意 CSS 颜色函数），编辑写回不破坏原值格式
• 无法解析的值（如含 var() 的 color-mix()）色板置灰禁用，仅文本框可编辑
• 文本框输入非法颜色不写回，并标红提示

颜色函数值编辑

示例代码

与 ConfigProvider 打通

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

ConfigProvider 子树实时预览

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

示例代码

自定义 token 列表

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

自定义 token

示例代码

数字 token 滑块联动

数字 token 行 = range 滑块 + number 输入框联动（min / max / step 复用 token 定义）：拖动滑块同步数字框并写回，反之亦然；滑块天然受 min/max 钳制。

滑块联动

示例代码

预设主题

applyPreset(name) / preset 属性应用内置预设主题，只调尺寸族 token（control-height / space），不动颜色：

• compact 紧凑：control-height 各档 -4px、space 各档按比例收缩
• comfortable 宽松：control-height 各档 +4px、space 各档按比例放大
• default：等价 reset()，清除已写入的内联变量

应用后记录进 writtenTokens，reset() 一并清除。

预设主题切换

紧凑 compact宽松 comfortable默认 default未应用

示例代码

组折叠与搜索

分组用 details/summary 可折叠（默认展开）；面板顶部搜索框按 token 名子串过滤（大小写不敏感），过滤时组自动展开、无匹配组隐藏，清空后恢复。

折叠与搜索过滤

示例代码

导出 / 导入 / 重置

• exportJson() 获取当前 token 集 JSON；exportCss() 获取 :root { ... } CSS 文本（同源）
• importJson(json) 应用 token 集到 themeRoot（非 -- 开头键忽略 + 告警），就地同步面板不丢焦点
• reset() 清除编辑器写入的内联变量，恢复默认主题值

导出 / 导入 / 重置

导出 JSON导出 CSS导入示例 JSON重置编辑器

点击按钮查看结果

示例代码

API

oas-theme-editor

属性

属性	说明	类型	默认值
preset	内置预设主题：compact（紧凑，control-height -4px、space 按比例收缩）/ comfortable（宽松，+4px、space 按比例放大）/ default（等价 reset，清除已写入内联变量）；非法值忽略并 dev 告警	—	—
token	自定义要编辑的 token 列表（CSS 变量名）	—	—

事件

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

方法	说明
exportJson()	返回当前 token 集 { '--oas-*': value }
exportCss()	返回 :root { --oas-*: value; ... } CSS 文本（与 exportJson 同源）
importJson(json)	应用 token 集到 themeRoot：{ '--oas-*': value }，非 -- 开头键忽略并 dev 告警（同值去重），写入后就地同步面板（不整棵重建、不丢焦点）
applyPreset(name)	应用内置预设主题（compact / comfortable / default）；非法名忽略并 dev 告警（同值去重）
reset()	清除编辑器写入宿主的内联 CSS 变量，恢复默认主题值

行为：token 从宿主（或最近 oas-config-provider）computed style 读取；编辑即时 style.setProperty 写回宿主，子树实时继承；位于 config-provider 内部时写入最近 provider（整个子树继承）。颜色行 = 色板 + 文本框双通道：色板只承载可解析为 #rrggbb 的值（rgb()/oklch() 等颜色函数自动转 hex，含 var() 的 color-mix() 等不可解析值色板置灰禁用）；文本框始终可编辑原始值（任意 CSS 颜色函数），非法输入不写回并标红提示。数字行 = range 滑块 + number 输入联动（min/max/step 由 token 定义），写回保留原单位；空值/非法值不写入不派发。组用 details/summary 可折叠（默认展开），顶部搜索框按 token 名子串过滤。预设主题只调尺寸族 token（control-height / space），应用后记录进 writtenTokens，reset() 一并清除。