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

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

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

开关	存储	说明
Claude 风格主题	host 设置命名空间 claude-theme.{enabled}	暖色主题，持久化
Claude 伪装	localStorage dsh-claude-theme.disguise	DeepSeek → Claude 品牌替换，可随时还原

给 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 <dsh bin> 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. 包级 <style> 标签（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，浅色 / 深色）

令牌	浅色	深色
--dsw-alias-bg-base	#faf9f5 象牙白	#262624
--dsw-alias-bg-layer-1	#ffffff	#30302e
--dsw-alias-bg-layer-2	#f7f5f0	#383836
--dsw-alias-bg-overlay	#ffffff	#2e2e2c
--dsw-alias-border-l1	rgba(31,30,29,.08)	rgba(255,255,255,.08)
--dsw-alias-border-l2	rgba(31,30,29,.14)	rgba(255,255,255,.14)
--dsw-alias-brand-primary	#d97757 赤陶	#e08568
--dsw-alias-label-primary	#1f1e1d	#f5f4ee
--dsw-alias-label-secondary	#6e6a5e	#b8b4aa
--dsw-alias-state-error-primary	#c0392b	#e0665a
--dsw-alias-state-success-primary	#3d8f6d	#4fa382
--dsw-alias-state-warn-primary	#a66e1b	#d9a13c
--dsw-specific-sidebar-fill	#f3f1ea	#232321

派生面覆盖按钮 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" 字面量保持不变）。