dsh-claude-theme — Claude 风格主题插件（DSH Web UI）

把 DSH Web 界面改为 Claude 风格：象牙白背景、赤陶色（terracotta）主色、暖灰文字，
浅色 / 深色两套色板；可选 Claude 伪装，把界面中的 DeepSeek 品牌元素
（logo/词标、页面标题、favicon、品牌文本）替换为 Claude，全部可逆。

这是一个静态 client 插件包：以 bundle 层挂载，随 dsh web 启动加载。
在 设置 → "Claude 主题" tab 内有两个开关，切换即时生效、免重启免刷新：

给 Agent 的安装 Prompt（一键复制）

把下面代码块整段发给任意 AI 助手（能读写文件、执行命令的编码 agent），它即可完成安装：

请把 dsh-claude-theme 安装为 DSH web profile 的插件（官方 CLI 方式）。
包源码位于 <本仓库路径>/claude-theme/（package.json 声明了 dsh.bundle.patch
和 dsh.client；lib/index.js 为 Node 半区，lib/client.js 为浏览器半区）。

步骤：

1. 安装并自动挂载（无需手改任何 composition 文件）：
- 本地包：`dsh plugin --profile web add file:<本仓库路径>/claude-theme`
- 已发布到 npm：`dsh plugin --profile web add dsh-claude-theme@<版本>`
CLI 的 bundle 协调会读取包内 dsh.bundle.patch 声明，把包名自动追加到
profile package.json 的 dsh.profile.bundles，下次启动即挂载。
⚠️ 不要手动改 cordis.patch.yml 或手拷 node_modules——官方命令一步到位。

2. 校验：`dsh --profile web --dump-config`，确认输出含
`# == dsh-claude-theme` 层和 `- id: claude-theme / name: dsh-claude-theme`
且无报错（该命令会写 profile 的 cordis.yml，需要目录写权限）。

3. 重启 dsh web（首次挂载需要；之后仅更新 client bundle 时只需刷新页面）：
- ⚠️ 若 agent 自身就跑在 dsh web 进程里，直接杀进程会杀掉自己。
用 `setsid -f` 启动一个脱离脚本：先 `kill -TERM` 旧进程（含 npm exec /
sh / node 三层，超时再 `-KILL`），等 3080 端口释放后
`nohup setsid  web` 重新拉起。
- ⚠️ 从 agent 沙箱内启动的重启脚本会继承文件访问限制，新实例可能因
EACCES 写 cordis.yml 崩溃——需要以完全权限（danger-full-access）
启动脚本，或直接请用户手动重启。

4. 验证：
- `curl -s -o /dev/null -w '%{http_code}' http://127.0.0.1:3080/plugins/dsh-claude-theme/client.js` → 200；
- 设置 → "Claude 主题" tab 出现，含「Claude 风格主题」与「Claude 伪装」
两个开关；主题开关打开即暖色外观（DeepSeek logo 不变）；
伪装开关打开后 logo/词标/标题/favicon 全部变为 Claude，关闭即还原；
- 两个开关都即时生效，无需重启或刷新。

注意：更新 client bundle 内容时，file: 依赖需要 remove + add 重同步
（pnpm 按 package.json 版本判断是否重装）：
`dsh plugin --profile web remove dsh-claude-theme && dsh plugin --profile web add file:<本仓库路径>/claude-theme`，
然后硬刷新一次页面加载新 bundle。

回滚：`dsh plugin --profile web remove dsh-claude-theme` 后重启。

项目结构

claude-theme/
├── package.json      # 包声明：dsh.bundle.patch（自动挂载）+ dsh.client 契约 + exports
├── cordis.patch.yml  # bundle patch：插入 claude-theme 插件行
├── README.md         # 本文件
└── lib/
├── index.js      # Node 半区：注册 claude-theme 设置命名空间（{ enabled }）
└── client.js     # 浏览器半区（ModuleLoader bundle）：主题 + 伪装 + 设置 tab

安装 / 挂载（官方 CLI）

# 本地包
dsh plugin --profile web add file:<本仓库路径>/claude-theme

# 发布到 npm 后（与 dsh-better-sidebar 相同的安装方式）
dsh plugin --profile web add dsh-claude-theme@<版本>

包内 dsh.bundle.patch 声明（./cordis.patch.yml）让 CLI 的 bundle 协调自动把
dsh-claude-theme 追加进 profile 的 dsh.profile.bundles——无需手动编辑
composition。重启 dsh web 后生效。

回滚：dsh plugin --profile web remove dsh-claude-theme 后重启。

实现机制

Node 半区（lib/index.js）

settings.register('claude-theme', z.object({ enabled: z.boolean().default(true) }))
—— 命名空间 schema 注册，首次安装默认启用。

浏览器半区（lib/client.js）

• 主题：
  1. theme.overrideTokens() 覆盖 13 个核心令牌（body 内联样式，随明暗自动切换）；
  2. 包级 ` 标签（data-plugin="dsh-claude-theme"）替换派生变量—— 基础样式表里约 60 个 alias 变量直接引用蓝灰静态色板，这里整体换成 Claude 暖色板（浅色body/ 深色body[data-ds-dark-theme]`）。
• 设置 tab：注册 settings.section（id: claude-theme），
  渲染两个赤陶色 switch 行。
• 伪装引擎（React 安全策略）：
• 词标 SVG（clipPath#dsh-wordmark-*）仅隐藏（inline display:none），
  在容器上叠加绝对定位的 Claude 星芒 + 衬线 "Claude" 字标——不动 React
  管理的子节点，避免 reconciler 崩溃；
• 文本节点只改 nodeValue（"DeepSeek"→"Claude"，跳过 script/style/code/pre
  等用户内容子树）；仅替换 title/aria-label/alt/placeholder 属性；
• document.title 与 favicon（data URI 星芒）替换并记录原件；
• MutationObserver + rAF 防抖重扫：React 重渲染 / 路由切换后自动重新覆盖；
• 关闭时从 WeakMap 记录还原全部原件、移除叠加层、断开 observer——完全可逆；
• 伪装状态存 localStorage（host schema 变更需重启，故不挂 host 设置）。
• 所有副作用注册 ctx.effect，插件卸载时自动清理。

核心令牌映射（theme.overrideTokens，浅色 / 深色）

派生面覆盖按钮 hover、代码块、tooltip、toast、滚动条、tertiary 文字、
thinking 渐变等全部暖色化；::selection 赤陶高光。

设计参考（Claude.ai 色板）

• 背景 ivory #FAF9F5、暗色 #262624；表面 #FFFFFF / #30302E
• 主色 terracotta #D97757（hover #C4633F）；暗色下 #E08568
• 主文字 #1F1E1D / #F5F4EE；次要 #6E6A5E / #B8B4AA
• 边框 hairline 暖灰；代码块 #F5F3EC / #30302D；tooltip/toast 深暖 #262624

备注

• 圆角体系已是 12px（与 Claude 接近），未改动。
• 字体沿用系统无衬线栈（Claude 字标用衬线，正文不动）。
• 伪装不修改用户内容（代码块、聊天文本中的 "DeepSeek" 字面量保持不变）。