护眼阅读皮肤 chaizedong73-arch/dsh-reading-comfort

dsh-reading-comfort

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

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

演示

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

| 原生 dsh | WorkBuddy 皮肤 |
| before | after |

它解决的是什么

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: css
: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 powershell -ExecutionPolicy Bypass -File uninstall.ps1 -Profile desktop

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

技术说明

注入通道

webserver/index-inject 推两行: js { 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__ 打掉导致整个应用起不来

路由注册 js
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、推送: powershell .\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