Claude Desktop 主题预览

@gongshiyun/dsh-theme-claude-desktop · 共覆盖 133 个 token · 每块色板的第一行是浅色取值,第二行是深色取值

浅色 · 暖砂

colorScheme: light

Claude Desktop 主题 H1

暖砂与赤陶 H2

Anthropic Serif H3

正文使用 Anthropic Sans 栈,中文回退到思源黑体 / 微软雅黑。字号与行高沿用 DSH 的内容字阶, 因此「设置 → 通用 → 内容字号」的 12–17px 调节依旧生效。行内代码 --dsw-alias-bg-base 使用等宽栈,代码块底色为暖砂。

引用块:暖砂 / 暖炭底色 + 赤陶侧边线。
  • 列表项一
  • 列表项二

链接(muted blue) · 加粗 · 斜体 · 删除线

/** 主题覆盖层的注册入口。 */
export function apply(ctx) {
  const tokens = { '--dsw-alias-bg-base': { light: '#FFFAF2', dark: '#26221E' } };
  for (const [name, modes] of Object.entries(tokens)) {
    ctx.theme.overrideTokens(name, modes);   // 133 个 token
  }
  return true;
}
用户气泡:暖砂填充,正文色文字。
发消息或创建任务…

深色 · 暖炭

colorScheme: dark

Claude Desktop 主题 H1

暖砂与赤陶 H2

Anthropic Serif H3

正文使用 Anthropic Sans 栈,中文回退到思源黑体 / 微软雅黑。字号与行高沿用 DSH 的内容字阶, 因此「设置 → 通用 → 内容字号」的 12–17px 调节依旧生效。行内代码 --dsw-alias-bg-base 使用等宽栈,代码块底色为暖砂。

引用块:暖砂 / 暖炭底色 + 赤陶侧边线。
  • 列表项一
  • 列表项二

链接(muted blue) · 加粗 · 斜体 · 删除线

/** 主题覆盖层的注册入口。 */
export function apply(ctx) {
  const tokens = { '--dsw-alias-bg-base': { light: '#FFFAF2', dark: '#26221E' } };
  for (const [name, modes] of Object.entries(tokens)) {
    ctx.theme.overrideTokens(name, modes);   // 133 个 token
  }
  return true;
}
用户气泡:暖砂填充,正文色文字。
发消息或创建任务…

token 色板

每一组:上排 = 浅色(light),下排 = 深色(dark)

表面 / 画布 / 侧栏surfaces

bg-base#FFFAF2
bg-layer-1#FFFDF9
bg-layer-2#FFFDF9
bg-layer-3#FFFDF9
bg-overlay#F1E7D8
sidebar-fill#F3EBDD
sidebar-nav-item-hover#EDE3D2
sidebar-nav-item-active#E9DEC9
sidebar-nav-item-active-accent#E1D2B8
input-major#FFFDF9
tip#F6EEE1
menu#FFFDF9
bg-base#26221E
bg-layer-1#2E2721
bg-layer-2#332C25
bg-layer-3#39312A
bg-overlay#3A3128
sidebar-fill#1E1A16
sidebar-nav-item-hover#2A241E
sidebar-nav-item-active#332B23
sidebar-nav-item-active-accent#3A3128
input-major#2E2721
tip#2A241E
menu#332C25

主色 / 交互accent

brand-primary#B85430
button-primary-hover#AA4C2B
button-primary-dimmed#E3C8B6
link#3B6A89
interactive-bg-hover#56412B14
interactive-bg-hover-accent#B8543024
interactive-bg-hover-danger#A9463614
interactive-bg-hover-solid#F1E7D8
brand-primary#DF805B
button-primary-hover#E8916D
button-primary-dimmed#5A3A2C
link#95BFD0
interactive-bg-hover#EBE1D214
interactive-bg-hover-accent#DF805B24
interactive-bg-hover-danger#E4827026
interactive-bg-hover-solid#332C25

文字text

label-primary#3A2E24
label-primary-dimmed#2A2018
label-secondary#776450
label-tertiary#8B7A6A
label-caption#A08D77
label-dimmed#C9BCA9
label-primary-foreground#FFFAF2
label-primary#E2D9CC
label-primary-dimmed#F0E7DA
label-secondary#A39684
label-tertiary#938573
label-caption#8A7B6B
label-dimmed#5A5049
label-primary-foreground#26150E

描边 / 滚动条borders

border-l1#56412B12
border-l2#56412B26
border-l3#56412B2E
border-l4#56412B3D
scrollbar-bg-l1#DED2C0
scrollbar-hover-l1#C4B29B
border-l1#EBE1D21A
border-l2#EBE1D22E
border-l3#EBE1D23D
border-l4#EBE1D24D
scrollbar-bg-l1#4A4239
scrollbar-hover-l1#5E5449

语义状态states

state-success-primary#4A7350
state-warn-primary#96651C
state-error-primary#A94636
state-business-primary#B85430
state-success-tertiary#DEE9DE
state-warn-tertiary#F6E8CF
state-business-tertiary#F4E3D8
state-success-primary#A6C896
state-warn-primary#E3BC72
state-error-primary#E48270
state-business-primary#DF805B
state-success-tertiary#2C3A2A
state-warn-tertiary#3C3222
state-business-tertiary#3A2A22

Markdown / 代码 / 气泡markdown

markdown-code-block#F8F1E6
markdown-code-block-banner#F3EBDD
markdown-inline-code#F8F1E6
markdown-tag#F1E7D8
markdown-citation#F1E7D8
bubble#F6E7D8
bubble-highlight#EFDCC4
toast-bg#2A2018
tooltip-bg#33281F
markdown-code-block#201B17
markdown-code-block-banner#2A241E
markdown-inline-code#201B17
markdown-tag#2A241E
markdown-citation#2A241E
bubble#332B24
bubble-highlight#3D342B
toast-bg#332C25
tooltip-bg#332C25

代码高亮取值--shiki-*

keyword#9B452Ckeyword#E39371string#4A7350string#A6C896comment#7B6954comment#938573function#3B6A89function#95BFD0constant#785B91constant#BAA0D4parameter#8F5F1Aparameter#E3BC72punctuation#8B7A6Apunctuation#A39684link#3B6A89link#95BFD0