调出你的配色
13 × 2让每一种颜色都合你心意
从 6 款主题出发，编辑浅色与深色的 13 个颜色角色。即时预览、检查对比度，再导出 CSS、JSON 或 Agent 提示词。
调出适合你的配色
这里即时预览你的配色；制作并安装后，才会改变 DSH 中的主题。
三步调好一套配色
6
已验证且兼容 Token 的主题
21
目录中已发布的主题
三步调好一套配色
- 01
选择基础主题
从包含完整颜色角色的兼容主题开始。
- 02
边调整，边预览
调整浅色与深色配色，立即查看对话界面的变化。
- 03
检查后导出
检查文字对比度，再保存 CSS 或 JSON，或将配色交给 Agent 制作主题。
调出适合你的配色
选择颜色角色，修改浅色或深色值，立即查看界面变化。
预览你的配色
对话品牌操作发送
可交互的 13 项 Token 映射
Token 07 / 13
品牌操作
主要操作、选中控件、链接和品牌强调色。
--dsw-alias-brand-primary已修改 0 个颜色
把配色用到 DSH 中
复制 Agent 提示词，把配色制作成主题。CSS 和 JSON 均包含浅深两种模式；JSON 可重新导入这里继续编辑。
导入的颜色会替换「深海」的浅深两种模式。基础主题保持不变，不会按文件中的主题名称切换。
JSON · 13 × 2
{
"format": "dsh-token-lab",
"version": 1,
"baseTheme": "deep-ocean",
"tokens": {
"--dsw-alias-bg-base": {
"light": "#F4F8FD",
"dark": "#07121F"
},
"--dsw-alias-bg-layer-1": {
"light": "#FFFFFF",
"dark": "#0C1B2B"
},
"--dsw-alias-bg-layer-2": {
"light": "#E9F2FC",
"dark": "#11263C"
},
"--dsw-alias-bg-overlay": {
"light": "#FFFFFF",
"dark": "#142B43"
},
"--dsw-alias-border-l1": {
"light": "#D6E3F1",
"dark": "#24415E"
},
"--dsw-alias-border-l2": {
"light": "#B7CCE2",
"dark": "#37617E"
},
"--dsw-alias-brand-primary": {
"light": "#1769E0",
"dark": "#62A8FF"
},
"--dsw-alias-label-primary": {
"light": "#132D46",
"dark": "#EFF6FF"
},
"--dsw-alias-label-secondary": {
"light": "#526C81",
"dark": "#A9BDD0"
},
"--dsw-alias-state-error-primary": {
"light": "#B93445",
"dark": "#FF7A86"
},
"--dsw-alias-state-success-primary": {
"light": "#167656",
"dark": "#55D6A6"
},
"--dsw-alias-state-warn-primary": {
"light": "#9B5E07",
"dark": "#FFC666"
},
"--dsw-specific-sidebar-fill": {
"light": "#E6F0FB",
"dark": "#091827"
}
}
}