跳到主要内容
DSH Themes

切换语言

打开导航

调出你的配色

13 × 2

让每一种颜色都合你心意

从 6 款主题出发，编辑浅色与深色的 13 个颜色角色。即时预览、检查对比度，再导出 CSS、JSON 或 Agent 提示词。

调出适合你的配色

这里即时预览你的配色；制作并安装后，才会改变 DSH 中的主题。

选择起始配色

选择基础主题，切换预览模式，再挑选要编辑的颜色角色。

已验证主题

深海石墨中继纸面终端日光轨迹玉制电路高信号

预览模式

浅色深色
三步调好一套配色

6

已验证且兼容 Token 的主题

21

目录中已发布的主题

三步调好一套配色

  1. 01

    选择基础主题

    从包含完整颜色角色的兼容主题开始。

  2. 02

    边调整，边预览

    调整浅色与深色配色，立即查看对话界面的变化。

  3. 03

    检查后导出

    检查文字对比度，再保存 CSS 或 JSON，或将配色交给 Agent 制作主题。

调出适合你的配色

选择颜色角色，修改浅色或深色值，立即查看界面变化。

预览你的配色

对话主要文本发送

从这里开始调整

调整阅读背景挑选强调色调整状态颜色

可交互的 13 项 Token 映射

01020304050607080910111213

Token 08 / 13

主要文本

最需要清晰阅读的标题、标签和高优先级内容。

--dsw-alias-label-primary

已修改 0 个颜色

把配色用到 DSH 中

复制 Agent 提示词，把配色制作成主题。CSS 和 JSON 均包含浅深两种模式；JSON 可重新导入这里继续编辑。

导入的颜色会替换「纸面终端」的浅深两种模式。基础主题保持不变，不会按文件中的主题名称切换。

JSON · 13 × 2
{
  "format": "dsh-token-lab",
  "version": 1,
  "baseTheme": "paper-console",
  "tokens": {
    "--dsw-alias-bg-base": {
      "light": "#F7F5ED",
      "dark": "#101813"
    },
    "--dsw-alias-bg-layer-1": {
      "light": "#FFFEFA",
      "dark": "#17221B"
    },
    "--dsw-alias-bg-layer-2": {
      "light": "#EFEBDD",
      "dark": "#1D2C22"
    },
    "--dsw-alias-bg-overlay": {
      "light": "#FFFDF6",
      "dark": "#223428"
    },
    "--dsw-alias-border-l1": {
      "light": "#DDD7C5",
      "dark": "#334A3B"
    },
    "--dsw-alias-border-l2": {
      "light": "#BFB7A0",
      "dark": "#4D6957"
    },
    "--dsw-alias-brand-primary": {
      "light": "#24704D",
      "dark": "#70D49F"
    },
    "--dsw-alias-label-primary": {
      "light": "#26372D",
      "dark": "#EAF4EC"
    },
    "--dsw-alias-label-secondary": {
      "light": "#5D6C63",
      "dark": "#B0C2B5"
    },
    "--dsw-alias-state-error-primary": {
      "light": "#B23D42",
      "dark": "#F27F82"
    },
    "--dsw-alias-state-success-primary": {
      "light": "#26704D",
      "dark": "#70D49F"
    },
    "--dsw-alias-state-warn-primary": {
      "light": "#926615",
      "dark": "#EBC36C"
    },
    "--dsw-specific-sidebar-fill": {
      "light": "#ECE8D9",
      "dark": "#121E17"
    }
  }
}