dsh-reading-comfort
DSH 阅读舒适度:重建界面层级、按区块分区配色、给 AI 回答加说话人标识与引导留白。纯 CSS,不改布局。
插件会安装到这里；不确定时保持 web。
npx -y @deepseek-ai/dsh plugin --profile web add github:chaizedong73-arch/dsh-reading-comfort#751421dae588b0f3282867aef847ce74c23de214
Reading Comfort 以 dsh-reading-comfort 发布，当前版本为 0.1.0。Plugin Hub 会校验它的 manifest，并保存精确安装来源，便于复现安装结果。
给 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 |
| 区域 | 改动 |
|---|---|
| 层级 | 五级明度阶梯,替换原来"一片白"的塌陷梯度 |
| 侧栏 | 会话行从"上下两行 + 图标"改成 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 做三件事,并留下备份:
dependencies["dsh-reading-comfort"] = "link:<本目录>"dsh.profile.bundlesnode_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: <引导脚本> } // 每次加载拉最新
三条硬约束(踩过):
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(0,1,2))官方聊天界面没有 assistant 头像这个概念(assistantAvatar 命中 0 次)。所以从
resources/icon.png(官方虎鲸标)用亮度阈值抠出虎鲸、染白、缩成 128px,
以 data URI 内嵌在 CSS 里 —— 不依赖任何路由,保证加载得出来。
仓库已经在本地初始化好(26 个文件全部暂存),只差一个 GitHub 用户名。
第一步:在 GitHub 上建一个空仓库(不要勾 README / .gitignore / License):
第二步:跑这个脚本,它会设身份、提交、加 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/
MIT