预览
左图:左侧是固定水印(女仆站姿立绘),正文区左下是可切换水印(这里选的是「吃饱饱」),右下角那只小家伙是桌宠 —— 见下方「搭配使用」。
右图:设置 → 通用设置里的四行选项,以及 21 张底图的缩略图列表。
⚠️ 这两张都是浅色模式(墨青配色)。终端配色只在深色模式下才显示它那套纯黑代码面板 + 金琥珀关键字。
🌙 深色模式建议把「可切换底图浓淡」设为「浓」。 固定层用的 multiply 是给白底设计的退底方式 —— 深色背景上「深色 × 图」仍然接近深色,水印会淡到几乎看不见;可切换层里也有一部分图走同样机制,所以整体给「浓」更稳。
这是什么
一个给 DSH Web 界面换肤的插件包。它做三件事:
- 重配整套颜色 token —— 5 套配色,浅色深色同时定义
- 叠两层背景水印 —— 一层固定不动,一层可切换
- 重着色代码语法 —— 9 类 token,按 Windows Terminal 的配色
配色和设置会被记住,进出设置页不会重置。
特性
定制配色(5 套)
| 名称 | 风格 |
|---|
| 青蓝 | 冷蓝主线,默认 |
| 素白 | 无色偏,最中性 |
| 靛紫 | 紫调 |
| 墨青 | 青绿调 |
| 终端 | 仿 Windows Terminal,深色下是纯黑代码面板 + 金琥珀关键字 |
背景水印(两层,互相独立)
两层各用一个伪元素(body::after / body::before),因为同一个元素的 opacity 会同时作用于它的所有背景层 —— 想各有各的浓度就必须分开。
| 层 | 内容 | 可调 |
|---|
| 固定层 | 女仆站姿立绘,左侧 | ❌ 锁定「淡」,不暴露给用户 |
| 可切换层 | 21 张表情包任选 | ✅ 形象 + 浓淡(关/淡/中/浓) |
🌙 深色模式下建议把浓淡设为「浓」(原因见上面「预览」一节)。固定层锁死在「淡」,它在深色背景上同样很淡 —— 这是已知取舍:固定层不暴露给用户,是为了保证它永远不被误调。
为什么用不同混合模式:白底立绘靠 mix-blend-mode: multiply 把白底抹掉、只留线条;透明贴纸则不能用 multiply(会把浅色压成脏色),改用纯合成。每张图的 kind 是按透明占比实测决定的,不是猜的。
位置是运行时量的:可切换层的左边距从页面的内联 grid-template-columns 里读取侧栏真实宽度(侧栏可拖动,264–420px),所以拖动侧栏后松手会重排 —— 而不是写死一个 280px。
行内代码底色(5 种)
褐色(默认,取当前配色的 warn 色,在终端配色下与关键字同源)· 中性 · 冷青 · 跟随强调色 · 无底色
终端配色做了两件具体的事
① 语法重着色。 Shiki 的颜色不是主题 token,而是 ui-theme/src/styles/shiki.css 里声明的普通 CSS 变量(--shiki-token-*)。主题的 29 个 token 里一个代码着色项都没有 —— 所以只能覆盖这些 CSS 变量,用与原样式表完全相同的选择器(:root / body[data-ds-dark-theme]),靠注入顺序取胜,不用 !important。
9 类 token 取自 Windows Terminal 的 Campbell 配色(Win11 上 PowerShell 7 的默认色):
| token | 暗色 | 对应 ANSI |
|---|
keyword | #FFC53D | 金琥珀(Campbell 的 brightYellow 只有 34% 饱和度,在纯黑上发灰,换成了 76% 的琥珀) |
string | #16C60C | brightGreen |
string-expression | #13A10E | green |
constant | #3B78FF | brightBlue |
function | #61D6D6 | brightCyan |
parameter | #E74856 | brightRed |
comment | #767676 | brightBlack |
punctuation | #CCCCCC | white |
link | #3B78FF | brightBlue |
② 代码面板拉开对比度。 页面炭灰 #23272F + 代码块纯黑 #000000,感知亮度差 ΔL* 15.6(原设计只有 5.3)。另有 4px 蓝色左缘竖条 + 1px 内描边(用 box-shadow 画,不影响布局)。
这里有个教训:相邻深色块的差异不能用 WCAG 对比度衡量。上述改动在 WCAG 上只从 1.11:1 变到 1.40:1(26%),而实际感知差异是 194% —— 近黑色落在传输曲线的陡峭段,比值量不出来。
搭配使用
dsh-pet-indesktop —— 把蓝色大肥鱼桌宠移植到 Windows / Linux / macOS,基于 PC2005-cloud/dsh-pet,并额外实现了其他交互功能。安装方式见它自己的 README。
为什么搭:同一套鲸鱼娘形象,分工互补 —— 这个主题管界面配色和水印,那只桌宠管桌面上会动的那只。两个一起用,工作环境从里到外都是蓝色大肥鱼(上面主界面截图的右下角就是它)。
安装
方式一 · 插件市场:在 DSH 的插件市场里填入仓库地址。
方式二 · 依赖标识:把
github:xuyixi992/dsh-fish-theme
交给 DSH 的插件安装(plugin_manager 的 install_bundle,target 传这个标识)。
安装后必须重启一次 DSH —— 宿主端注册 22 条图片路由,那是在启动时完成的。
设置在哪里
设置 → 通用 → 定制配色。四项:定制配色 / 行内代码底色 / 可切换底图 / 可切换底图浓淡。
换成你自己的水印图
- 图片放进
images/,命名成 <id>.webp
index.js 的 IMAGE_IDS 加一条 <id>
client.js 的 SWITCHABLES 加一条 { id: '<id>', name: '显示名', kind: '…' }
kind 决定退底方式,按透明占比选:
kind | 条件 | 效果 |
|---|
alpha | 透明像素 > 10% | 纯合成,透明贴纸用这个 |
cutout | 不透明且四角接近纯白 | multiply 抹掉白底 |
scene | 其余(满幅无底色) | 径向遮罩羽化边缘 |
诊断日志
宿主端的 console 从会话里看不到,所以每一步都写进:
%TEMP%\dsh-fish-theme-host.log (Linux/macOS: $TMPDIR/dsh-fish-theme-host.log)
故意不写在包目录里 —— 从 git 装进来时包在 pnpm store 内,写入不可靠;而且发布后日志不该跟源码混在一起。
版权与许可
作者 ECXU · https://github.com/xuyixi992
这是双协议项目,代码和图片不是一回事。
| 范围 | 协议 |
|---|
源码(client.js / index.js / cordis.patch.yml / package.json 等) | MIT —— 见 LICENSE |
images/ 下的全部图片 | CC BY-NC-SA 4.0 —— 见 images/LICENSE |
图片署名(协议要求,请勿移除)
images/ 里的图是同人作品,非商业使用,二次演绎需沿用同一协议。本项目为非官方同人,不代表任何官方立场,图片权利归原作者所有。
如果你想去掉图片
client.js 里把 SWITCHABLES 清空(或只留自绘图),同时删掉 images/ 下相应的文件 —— 代码部分就能以纯 MIT 发布了。
已知限制
- 水印是绝对定位的装饰层,不参与布局,也不影响你选中文字(
pointer-events: none)
- 侧栏拖动、窗口缩放会触发重排;其他布局变化不会
- 选择记忆存在 localStorage,绑定在打开 DSH 时的 origin 上;换端口或换主机名打开时记忆不跟随(重选一次即可)。DSH 客户端服务目录里没有持久化状态服务,所以这是唯一可用的存储
- 水印图按高度定尺寸并封顶;如果换的图特别宽,宽度可能超出预期
English
A theme plugin for the DeepSeek Harness Web UI: five colour palettes (light and
dark defined for every token), two independent background watermarks, and
Shiki syntax recolouring based on Windows Terminal's Campbell scheme. Choices
persist in localStorage.
The source code is MIT; the artwork under images/ is third-party fan art
under CC BY-NC-SA 4.0 and carries the attribution listed above. You cannot
relicense the artwork, and it may not be used commercially.