dsh-reading-comfort

给 DeepSeek Harness(dsh) 换一套「长时间看不累」的界面 —— 配色与几何全部来自对 WorkBuddy 截图的像素级逆向,不是拍脑袋。

纯 CSS + 一次 DOM 标记 + 一个从官方图标抠出来的头像。不改布局结构、不注入可见 DOM、零运行时依赖。

---

演示

👉 打开交互式演示页 —— 右上角一键切换「原生 dsh ⇄ WorkBuddy 皮肤」,同一个 DOM,两套令牌。

原生 dsh	WorkBuddy 皮肤

---

它解决的是什么

dsh 的浅色主题有一个结构性问题 —— 从 app.asar 里读出来的原文:

--dsw-alias-bg-base:    var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-00)  /* #fff */
--dsw-specific-sidebar-fill: var(--dsw-static-neutral-bluish-50)  /* #f9fafb */

主区、卡片、面板、嵌套层全是同一个 #fff;侧栏只和主区差 2%。 整个界面的明暗阶梯是塌陷的 —— 于是"处处需要眼力去分辨哪里是哪里"。

另外三个同源问题:

/* 表格:没有外框,只有 0.5px 下边线,第一列还贴边 */
._tableScroll_xxx table { border-collapse: collapse }
._tableScroll_xxx th { padding:10px 16px; border-bottom:.5px solid ... }
._tableScroll_xxx td:first-child { padding-left: 0 }

/* "已完成,用时 X" 那一行:33px 高、tertiary 色、带下边线的整宽按钮 —— 像工具栏 */
._4AI11G_root { height:calc(33px + ...); color:var(--dsw-alias-label-tertiary);
                border-bottom:.5px solid ...; display:flex }

/* 会话行是"图标 + 上下两行" */
.S0jZwq_rowContent { flex-direction: column }

---

逆向出来的设计规格

全部通过逐区域像素采样测得,脚本见 tools/(见文末)。

五级明度阶梯

层级	色值	饱和度	用在哪
① 最亮	#FFFFFF	—	输入框 / 卡片
②	#F5F8F5	18%	主区底
③	#E9F1E9	22%	用户气泡 / 附件卡
④	#E4ECE5	17%	侧栏底
⑤ 最深	#D5E5D6	24%	侧栏选中行

关键数字

项目	实测
饱和度天花板	24% —— 任何底色不超过它
侧栏行高	40px(文字带中心间距 39~41,极匀)
选中行高度	36px
用户气泡圆角	15px
输入框卡片圆角	42px(含抗锯齿高估,实现取 28)
侧栏宽	345px
正文 / 次要 / 时间戳	#1A2418 / #5E615D / #707B73

三条设计原则

1. 饱和度天花板 24%,任何底色不超过它
2. 不用边框分块 —— 侧栏和主区之间连分隔线都没有,全靠底色差
3. 焦点用"最亮 + 最大圆角" —— 输入框是全界面唯一纯白的地方,靠形状跳出,不用彩色

---

装了什么

区域	改动
层级	五级明度阶梯,替换原来"一片白"的塌陷梯度
侧栏	会话行从"上下两行 + 图标"改成 40px 单行,标题左 / 时间右;去掉侧栏分隔线;选中态 #D5E5D6
回答头	"已完成,用时 X" 从工具栏样式改成 头像 + 名字 + 元信息,并在下面留 26px 引导留白
输入框	纯白大圆角卡(28px)+ 柔和阴影
表格	1px 外框 + 圆角 + 表头底色 + 恢复第一列内边距
代码块 / 引用块	加边界与底色
排版	行高 1.85;段落 16→10px;标题上 32→24px;h1 落差 12→5px

深色模式不碰,保持官方原样。

---

安装

# 1. 把插件放到任意目录,例如 ~/.dsh/plugins/dsh-reading-comfort
# 2. 执行安装脚本
powershell -ExecutionPolicy Bypass -File install.ps1 -Profile desktop
# 3. 完全退出并重开 DeepSeek Harness

install.ps1 做三件事,并留下备份:

1. dependencies["dsh-reading-comfort"] = "link:<本目录>"
2. 追加进 dsh.profile.bundles
3. 在 node_modules/ 下建 junction

---

改东西:刷新页面就行

插件注册了三条热加载路由,启动时注入的那段脚本是极简且永不变化的引导,每次页面加载都去拉最新的文件:

/dsh-reading-comfort/comfort.css
/dsh-reading-comfort/runtime.js
/dsh-reading-comfort/logo.png

改什么	生效方式
第一次安装	完全退出并重开 DSH
之后改 CSS / JS / logo	刷新页面

---

调参

所有可调数字集中在 comfort.css 最上面那段 :root:

:root {
  /* 背景透明度:WorkBuddy 是实底,默认 1 */
  --dsrc-base-alpha:    1;
  --dsrc-sidebar-alpha: 1;

  /* 五级阶梯 */
  --dsrc-base-rgb:    245 248 245;
  --dsrc-sidebar-rgb: 228 236 229;
  --dsrc-selected-rgb:213 229 214;
  --dsrc-bubble-rgb:  233 241 233;

  /* 点睛色:默认 WorkBuddy 绿;改成 var(--dsrc-blue) 就变蓝色点睛 */
  --dsrc-accent: var(--dsrc-brand-ink);
  --dsrc-blue:   #2d6cfe;

  /* 回答头 */
  --dsrc-head-name:    "DeepSeek";
  --dsrc-head-avatar:  30px;
  --dsrc-head-gap-bot: 26px;   /* ★ 引导留白 */
}

想让壁纸/视频透出来(配合 dsh-video-skin 等):把 --dsrc-base-alpha / --dsrc-sidebar-alpha 改成 0.9 左右即可。本插件用 html:root body:not(...) 的选择器,特异性高于 video-skin, 所以这里说了算。

---

卸载

powershell -ExecutionPolicy Bypass -File uninstall.ps1 -Profile desktop

或直接恢复 install.ps1 留下的 package.json.<时间戳>.bak。

---

技术说明

注入通道

webserver/index-inject 推两行:

{ kind: 'style',  text: <comfort.css> }        // 启动快照,保底
{ kind: 'script', placement: 'body', text: <引导脚本> }  // 每次加载拉最新

三条硬约束(踩过):

1. 订阅必须同步注册 —— 注入表只在宿主启动时收集一次
2. 行按数组顺序应用 —— style 必须在 script 之前
3. 绝不能用 kind:'script-src' —— 桌面壳对它 await loadScript(src),失败即 reject, 会把 __DSH_BOOT_READY__ 打掉导致整个应用起不来

路由注册

ctx.inject(['webServer'], (child) => {
  child.effect(() => child.webServer.register({ kind: 'exact', path, handler }))
})

不能用 ctx.get('webServer') —— 服务未就绪时它返回 undefined,会让路由静默地一个都注册不上 (本项目实测踩过:头像加载不出来 + 热加载失效)。

选择器策略

• 类名用 [class~="..."] 整词匹配 —— CSS Modules 生成的 S0jZwq_row 是整词, 而 [class*="S0jZwq_row"] 会误伤 S0jZwq_rowTitle
• 回答头按文字内容标记(已完成…用时 / Completed in),不依赖会变的 hash
• 令牌覆盖的选择器特异性要 明确高于 其他皮肤插件(video-skin 是 (0,1,2))

头像

官方聊天界面没有 assistant 头像这个概念(assistantAvatar 命中 0 次)。所以从 resources/icon.png(官方虎鲸标)用亮度阈值抠出虎鲸、染白、缩成 128px, 以 data URI 内嵌在 CSS 里 —— 不依赖任何路由,保证加载得出来。

---

发布到 GitHub

仓库已经在本地初始化好(26 个文件全部暂存),只差一个 GitHub 用户名。

第一步:在 GitHub 上建一个空仓库(不要勾 README / .gitignore / License):

https://github.com/new?name=dsh-reading-comfort

第二步:跑这个脚本,它会设身份、提交、加 remote、推送:

.\push-to-github.ps1 -User 你的用户名
# 想换仓库名 / 建私有仓库:
.\push-to-github.ps1 -User 你的用户名 -Repo dsh-skin -Private

第一次推送会弹出浏览器让你授权 —— 凭据由 Windows 凭据管理器保管,脚本本身不接触 token。 默认邮箱用 用户名@users.noreply.github.com,不会暴露你的真实邮箱。

⚠️ push-to-github.ps1 是 UTF-8 with BOM 编码。因为文件里有中文, 不加 BOM 的话 PowerShell 5.1 会按 ANSI 解析并报"字符串缺少终止符"。

想让演示页上线:Settings → Pages → Source 选 main / root,然后访问 https://你的用户名.github.io/dsh-reading-comfort/demo/

---

参考

• WorkBuddy 设计规格 —— 完整测量报告
• DeepSeek Harness

---

MIT