液态玻璃皮肤 24mlight/dsh-liquid-glass

dsh-liquid-glass

给 DeepSeek Harness（DSH）用的苹果风格液态玻璃皮肤。
它重新设计了 Harness 的 Web 界面，并针对 ds-bot 多 Bot 插件做了适配，让 DSH 和 ds-bot 看起来像同一个应用。支持亮色和暗色主题，桌面浏览器和安卓 WebView 都能用。

一个给 DeepSeek Harness（DSH）用的苹果「液态玻璃」风格皮肤插件：它会修改 Harness 的界面，并针对 ds-bot（多 Bot 群聊插件）做了适配。支持亮色和暗色，桌面浏览器和安卓 WebView 都能用。

长什么样

- 通透的薄玻璃。 填充很薄，内容能透出来。壁纸是单一纯色。
- 悬浮的碎片，没有整块板子。 侧边栏不画面板：只有按钮和选中项是小块玻璃。标题胶囊和输入框悬浮在对话之上。
- 边缘折射（Chromium，含安卓 WebView）。 标题胶囊、纯 DSH 输入框和设置面板会在边缘弯折背后的内容，像镜片一样。Firefox 和 Safari 只保留模糊效果，要求降低透明度的人也一样。消息和侧边栏上从不使用。
- 自身不带渐变。 皮肤的所有颜色都是纯色。ds-bot 自己的 Bot 配色（渐变头像、色块、用量条）完全保持 ds-bot 原本的样子。
- 手机布局（480px 及以下）。 助手回复占满整行，不带气泡；设置对话框（ds-bot 和 DSH Harness）变成全屏面板，顶部带标签栏；详情抽屉是全宽面板；输入框的文本框不显示滚动条。
- 手机：可折叠的 Bot 侧栏（ds-bot）。 在手机上，ds-bot 把 Bot 显示成一条侧栏，会占走对话的宽度。左上角有一个 32px 的小玻璃按钮，位于侧栏那一列里，用来显示和隐藏侧栏。侧栏默认显示，只有这个按钮能关掉它（选中某个 Bot 或 DSH Agent 不会关闭）；这个选择会被记住。按钮与标题胶囊的上边缘、侧栏图标的中心线对齐，按页面实测。
- 可以拉出来的 Bot 列表（ds-bot 侧栏）。 窄侧栏只显示头像，Bot 一多就看不到名字。
- 打开： 侧栏右边缘有一个细长的玻璃拉手，点开就能在屏幕上展开 ds-bot 的完整列表（名字、最后一条消息、时间、未读、置顶），右侧留一条变暗的聊天。拖动拉手，列表跟着手指走，超过 40% 就弹开，否则退回侧栏；轻点也能打开。
- 关闭： 返回按钮（左上角）、安卓返回键、向左滑动、点击变暗的那一条，或者选中某个聊天，都能关掉。
- 原理： 皮肤打开 DSH 自己的侧边栏，把它铺在聊天之上，所以背后的对话保持不动。只要 ds-bot 显示侧栏，折叠屏和窄窗口都能用。
- 手机端：DSH Agent 标题居中（ds-bot 0.1.2+）。 DSH Agent 会话会显示 DSH 自己的会话标题栏，收起侧栏后，标题会压在侧栏按钮下方、贴着左边缘。现在改成了居中的玻璃胶囊，高度与按钮一致，并且与按钮齐平。
- 手机端：回复下方的消息工具（ds-bot）。 回应、回复和更多操作都放在每条回复下方，不再溢出右边缘，会话也就不会横向滚动。它们始终显示在一条回复的最后一条消息下方，更早的消息点一下才出现。
- 任意宽度下 Bot 侧栏都稳定（ds-bot）。 窄侧栏的样式由自身是否出现决定，不再依赖屏幕宽度断点，所以手机、展开的折叠屏和窄窗口都能得到同样的适配：没有磁贴被边缘裁掉；键盘弹出、bot 列表需要滚动时，靠触摸滚动，不显示滚动条，图标也就不会移位。
- 手机端：bot 头像挨着名字（ds-bot）。 群聊里头像和 bot 名字在同一行，不再掉到长回复的底部。
- 刚发出的消息不再闪一下。 bot 还在工作时发出的消息（正在引导，或还没被接纳）会拿到和已发送消息一样的强调色玻璃，而不是 ds-bot 的主题色——那个颜色在深色模式下会闪成接近白色。
- 轨迹详情可读。 DSH 从轨迹视图打开的事件面板（手机上盖在表格上方）改成接近实心的磨砂玻璃，背后的表格不会再透到文字里。
- 浅色与深色。 深色模式跟随应用自身的主题开关。深色是真正的黑，就像 X 的「Lights out」：纯黑壁纸配中性灰玻璃（不带藏青色调），依然能看出是抬升的表面，只有强调色保持蓝色。

截图

Web（桌面浏览器）

ds-bot chat on the web

DSH home on the web

手机（Android 应用）

ds-bot chat on a phone

手机上的设置面板，浅色与深色：

settings sheet on a phone, light and dark

安装

不需要 npm 账号，也不需要 registry：DSH 的 dsh plugin 命令会把参数交给配置档目录里的 pnpm，而 pnpm 可以直接从这个 GitHub 仓库安装。在运行 DSH web 配置档的机器上执行下面的命令（需要 git）：

optional: the ds-bot multi-bot plugin (the skin is adapted for it)
dsh plugin --profile web add ds-bot

the skin, straight from GitHub
dsh plugin --profile web add github:24mlight/dsh-liquid-glass
systemctl restart dsh-web
把 web 换成你配置档的名字，然后按你平时的方式重启 DSH（systemd 部署用 systemctl restart dsh-web）。重启后刷新页面。

想用本地副本？克隆仓库，然后添加文件夹：

git clone https://github.com/24mlight/dsh-liquid-glass
dsh plugin --profile web add ./dsh-liquid-glass

皮肤在有无 ds-bot 时都能用，两者安装顺序随意。ds-bot 界面开启时（body[data-bt-motion]），皮肤会重新给它的侧边栏、头部胶囊、气泡、详情抽屉、记忆与设置对话框以及 Usage 页面套上皮肤，抹平 ds-bot 自带的淡入淡出（头部淡入、加载骨架、主题预览色块），并调整机器人名称颜色和次要文字，让它们在玻璃上更易读。机器人本身的颜色保持不变。在 ds-bot 的经典 Agent 模式下，套用的是普通 DSH 皮肤。

插件的包名是 dsh-glass-skin，所以 update 和 remove 用的就是这个名字（GitHub 仓库是 dsh-liquid-glass）：

dsh plugin --profile web update dsh-glass-skin && systemctl restart dsh-web
dsh plugin --profile web remove dsh-glass-skin && systemctl restart dsh-web

移除插件会移除整套皮肤：它的样式表、折射滤镜、手机侧栏按钮及其类名。

工作原理

lib/client.js browser half: injects one (and, on Chromium, one hidden
of refraction filters) and a MutationObserver that
re-mounts them if the app wipes them. The only element it adds
besides those is the phone rail button; no DOM restructuring.
lib/index.js host half: no-op (pure client skin).
cordis.patch.yml mounts the plugin entry into the profile tree.

DSH 经常重构，CSS 模块的类哈希会变，所以规则优先依赖最稳定的钩子：

1. 应用自带的数据属性，比如 [data-composer-card]、[data-cordis-panel]、[data-conversation-scroll] 和 [data-chat-flow-kind]。
2. 设计 token 覆盖。 --dsw-alias-bg- 和 --dsw-alias-border- 被重新定义为半透明值，凡是靠它们上色的元素都会变成玻璃，不用逐个元素写规则。
3. 语义化类名后缀，比如 [class="titlebar"] 或 :is([class$="_card"], [class="_card "])，它们能扛住哈希变化。
4. ds-bot 自带的 --bt- token 和 .bt- 类，始终限定在 body[data-bt-motion] 之下。

所有规则都挂在 html.glass-skin 下。深色模式是纯 CSS，靠应用的 [data-ds-dark-theme] 属性切换，不用 JS 跟踪状态。

如果 DSH 升级后外观坏了，检查应用是否改了类名后缀（titlebar、sidebarCol、centerCol）、--dsw-alias-* token 或数据属性，然后相应更新 lib/client.js 里的 CSS。测试用 node --test 运行。

License

MIT
内置字体，采用 SIL Open Font License 1.1 授权：Inter（The Inter Project Authors，见 LICENSE-Inter.txt）和 Be Vietnam Pro（The Be Vietnam Pro Project Authors，见 LICENSE-BeVietnamPro.txt）。