chajiuqqq/dsh-claude-theme

插件Plugin 原生Native ⭐ 2 cat_label.dshcat_label.dsh

dsh 的 Claude 风格界面

项目介绍Project Overview

dsh-claude-theme 将 DSH Web 界面改为 Claude 风格:象牙白背景、赤陶主色、暖灰文字,含浅色/深色两套色板。可选 Claude 伪装,替换 DeepSeek 品牌元素,完全可逆。主题与伪装开关即时生效,免重启。适合偏好 Claude 视觉风格的用户。注意:伪装不修改用户内容中的 "DeepSeek" 字面量。

dsh-claude-theme restyles the DSH Web UI with a Claude-inspired palette: ivory background, terracotta accents, and warm gray text, in both light and dark modes. An optional disguise mode swaps DeepSeek branding (logo, wordmark, title, favicon) for Claude's, fully reversible. Both toggles apply instantly without restart or refresh. Use it if you prefer Claude's visual style. Note: disguise leaves "DeepSeek" text inside user content untouched.

或使用命令行安装(适合开发者)Or use CLI install (for developers)

命令行安装CLI Install

dsh plugin --profile web add github:chajiuqqq/dsh-claude-theme

chajiuqqq/dsh-claude-theme 加入你的 DSH 配置(web profile)即可启用。

READMEREADME

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" 字面量保持不变)。
上一个 Prev dsh-guardian 下一个 Next dsh-read-history