从基础主题到自己的配色
- 01
选择基础主题
从带有完整颜色数据的兼容主题开始。页面分别展示兼容主题数与全部已发布主题数,两者用途不同。
- 02
选择角色并编辑
选择背景、文字、强调色或状态颜色,修改十六进制值。分别调整浅色与深色模式,并在旁边的对话预览中检查文字、代码和控件。
- 03
比较与检查
与原主题对比,检查预览文字在不同背景上的最低对比度。普通文字需要至少 4.5:1;调整后仍应检查真实界面的焦点与键盘操作。
- 04
导出并制作主题
下载同时包含两种模式的 CSS 或 JSON。JSON 可重新导入。复制 Agent 提示词,可以把当前配色交给 Agent 构建、安装并实测一个独立主题。
案例:更温和的长文阅读界面
以喜欢的主题为基础,将阅读背景调整为稍暖的中性色,再检查次要文字是否仍清晰。接着选择一个容易识别的强调色,用于主要按钮和选中状态。切换到深色模式做独立调整,避免直接反转浅色值导致警告或代码难读。
根据我从 Token Lab 导出的 JSON 制作独立 DSH 主题,目标版本 0.1.3-alpha.1,源码提交 d347e703908d0406b7a7ef80e3a0e594d86b2215。保留浅色与深色的全部 13 个语义 token,先检查文字对比度,再构建并在真实 Harness 中检查侧栏、消息、代码、菜单和输入框,给出安装、重启、切换和回滚步骤。草稿通过实测前不要声明已验证。继续操作
常见问题
修改前需要了解的事项
关于格式、兼容性、证据与回滚的简明说明。
这篇指南核实哪些范围?
本指南覆盖:完整浅色与深色编辑;文字对比度检查;CSS、JSON 与 Agent 提示词导出
我应该先做什么?
你不必从空白开始设计配色。Token Lab 让你在现有主题上逐个调整颜色,并即时看到它们在对话界面中的效果。
最需要记住的边界是什么?
Token Lab 编辑的是草稿,不会立即修改已安装主题。起始值来自主题数据,导出的新配色需要面向 0.1.3-alpha.1 构建,再检查真实侧栏、对话、代码、菜单、输入框、切换和回滚。浏览器标签页保存只是临时便利,请导出 JSON 保留副本。
导出 CSS 会自动安装主题吗?
不会。CSS 和 JSON 是配色文件。使用 Agent 提示词构建独立包,安装并实测后,已安装界面才会改变。
对比度通过就可以发布吗?
不能只看这个结果。对比度是颜色检查,还需要真实界面、键盘焦点、不同屏幕与运行行为的验证。
继续学习
查看验证证据并继续操作
对比已发布制品,或返回安装文档。