跳到主要内容
返回学习中心
09工作台阅读 9 分钟进阶

指南 09 · 工作台

用 Token Lab 调出自己的配色

你不必从空白开始设计配色。Token Lab 让你在现有主题上逐个调整颜色,并即时看到它们在对话界面中的效果。

最后验证
2026年9月6日
指南源码基线
0.1.3-alpha.1
安装状态
以所选条目的记录为准
验证范围
  • 完整浅色与深色编辑
  • 文字对比度检查
  • CSS、JSON 与 Agent 提示词导出
本页目录
  1. 从基础主题到自己的配色
  2. 案例:更温和的长文阅读界面

从基础主题到自己的配色

  1. 01

    选择基础主题

    从带有完整颜色数据的兼容主题开始。页面分别展示兼容主题数与全部已发布主题数,两者用途不同。

  2. 02

    选择角色并编辑

    选择背景、文字、强调色或状态颜色,修改十六进制值。分别调整浅色与深色模式,并在旁边的对话预览中检查文字、代码和控件。

  3. 03

    比较与检查

    与原主题对比,检查预览文字在不同背景上的最低对比度。普通文字需要至少 4.5:1;调整后仍应检查真实界面的焦点与键盘操作。

  4. 04

    导出并制作主题

    下载同时包含两种模式的 CSS 或 JSON。JSON 可重新导入。复制 Agent 提示词,可以把当前配色交给 Agent 构建、安装并实测一个独立主题。

案例:更温和的长文阅读界面

以喜欢的主题为基础,将阅读背景调整为稍暖的中性色,再检查次要文字是否仍清晰。接着选择一个容易识别的强调色,用于主要按钮和选中状态。切换到深色模式做独立调整,避免直接反转浅色值导致警告或代码难读。

text
根据我从 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 提示词构建独立包,安装并实测后,已安装界面才会改变。

对比度通过就可以发布吗?

不能只看这个结果。对比度是颜色检查,还需要真实界面、键盘焦点、不同屏幕与运行行为的验证。

继续学习

查看验证证据并继续操作

对比已发布制品,或返回安装文档。