dsh-pixel-crt:给 DSH 对话区换一套暗色 CRT 像素皮肤

前言

DSH 的理念是「一切皆插件」,Web GUI 的对话区同样可以换皮。做智能体开发时,对话区是待得最久的地方,默认样式看久了容易疲劳:圆角、渐变、软阴影都是”通用感”的来源。dsh-pixel-crt 是社区作者 kingdawangXTA 维护的一个 DSH 插件,属于「趣味换装」分类,做的事很单一——把 Web GUI 的对话区和输入区整体改成深色 CRT 像素风:硬 2px 边框、块状投影、位图风格标题、扫描线。侧栏、标题栏和其它面板保持默认,不动布局、不动字号。

下面介绍这个插件能做什么、怎么装、有哪些已知的限制。

这是什么

一句话定位:一个纯前端的 DSH Web GUI 皮肤 bundle,只作用于对话区的聊天区([data-conversation-region="chat"])和输入区([data-conversation-region="composer"])。

维护者:kingdawangXTA。分类:趣味换装。仓库地址见文末。许可证:MIT。

它不引入任何后端路由、配置或状态,也不向磁盘写文件,卸载方式是直接禁用或移除该 bundle。

核心功能

  1. 在聊天区和输入区内重定义配色:接近纯黑的底色、青色强调色、圆角归零。凡是读取 --dsw-alias-* 变量的组件会自动跟随这套 token。
  2. 补上像素风的”家具”:2px 边框、3px 3px 0 的块状投影、按下时的位移、平坦的代码块、方形滚动条、青色光标、像素选区。
  3. 标题和按钮切到位图字体(Unifont / Zpix / WenQuanYi Zen Hei Sharp,按系统里装了哪个来)。正文保持原来的 14px 和系统字体——位图字体在小字号下会糊成一团,所以不动正文。
  4. 用一层重复渐变做轻微的扫描线效果。

它明确不做什么

这部分和功能同样重要,README 里专门列了一节:

  • 不碰侧栏和对话区之外的任何面板,标题栏保持默认。
  • 不改消息布局、间距和字号。什么都不动,只换皮。
  • 是纯前端 bundle:没有宿主路由、没有配置项、没有持久化状态。

安装与启用

安装命令直接来自 README,不要凭仓库名去拼 dsh plugin add github:owner/repo。

一种是让插件管理器从仓库安装,把仓库地址传给命令:

dsh plugin add <this-repo-url>

另一种是已经 clone 过代码时,让插件管理器指向本地 checkout:

dsh plugin install ./pixel-crt

装完需要重新加载 Web GUI 才会生效。卸载时禁用或移除 dsh-pixel-crt 这个 bundle 即可。

典型的「对比度修正」

深色皮肤最容易遇到的坑,是有些组件把背景色写死在自己的局部变量里(比如 --deliverable-fill),或者用 color-mix(#fff 50%, transparent) 现算颜色,没有走 --dsw-alias-* 这些别名 token。结果就是深色底上会留下一些浅色卡片,配着浅色文字,典型的场景是文件名直接读不出来。

这个 bundle 的处理办法是:每次渲染之后跑一个”对比度清扫”,逻辑很简单——如果一个元素落在浅色背景上,并且它的文字也是浅色的,就把这个背景压暗。深色表面和”浅底深字”的卡片一律不动。清扫是防抖的,避免每次渲染都重复扫描。

已知的粗糙之处

README 里给了三条,安装前值得先评估:

  • 只带图标的窄按钮在 2px 边框下会显得粗笨。
  • 所有标题统一塌到 16px。位图字体只在 12/16px 这样的网格上才清晰,所以做不了字号层级。
  • 扫描线只是一条 CSS 规则,不想要就删掉对应的 background-image 行。

第 3 条顺便说明整个皮肤的实际实现思路:核心是对 data-conversation-region 作用域做 CSS 改写,所以调整成本很低。

适用场景与注意事项

适合谁:想在 Web GUI 里要一套统一深色、像素风、只换皮不改结构的人;以及想更清楚地看到对比度清扫实际效果的人。像素字体只在特定字号下成立,追求排版层级的不适合。

需要注意两点:

  1. 插件运行在当前 dsh 进程的权限内,安装前应检查源码与许可证。本插件的许可证是 MIT,源码规模不大,可以直接读。
  2. 安装命令里的 <this-repo-url> 需要替换成实际的仓库地址,README 只是以占位符形式给出的。

结尾

dsh-pixel-crt 的价值在于范围小而明确:只改对话区和输入区的观感,不动布局、不动数据、不写磁盘。想换皮的人可以在低风险下试一套 CRT 风格的皮肤,不满意就移除 bundle。需要说明的是,它所在的社区目录是独立站点,与 DeepSeek / 幻方没有官方从属关系,不是官方应用商店。

  • 目录页:https://www.skillhub.cn/plugins/kingdawangXTA/dsh-pixel-crt
  • GitHub:https://github.com/kingdawangXTA/dsh-pixel-crt
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜