naniwet/dsh-themes

dsh-theme

一个用于 DeepSeek Harness Web UI 的可配置皮肤。

一个插件，多种外观：颜色、字体和图像全都是配置项，因此
新皮肤只是一个配置块，而不是一个分支。

预设

| | |
|---|---|
| Code Geass，深色 | Code Geass，浅色 |
| SPY×FAMILY，深色 | SPY×FAMILY，浅色 |

| 预设 | 调色板 | 显示字体 |
|---|---|---|
| presets/code-geass.yml | 金色 #c9a227 · 深红 #a01c26，背景为近黑色 #0b0810 | 宋体 / 衬线 |
| presets/spy-family.yml | 森林绿 #2f5d50 · 玫瑰色 #d4788a，背景为绿黑色 #0f1512 | 苹方 / 圆体无衬线 |

用 presets/all.yml 挂载全部预设，然后在 设置 → 通用 中切换；选择会
立即生效，并由浏览器记住。配置中的 active 只决定浏览器在尚未做出选择之前
看到的内容。

该选择存储在本地，而非设置文档中：由树外插件注册的命名空间无法到达浏览器的
设置传输通道，因此绑定到它的选择器会静默丢弃每一次写入。

两个预设都附带单独调整过的浅色方案，而非派生而来：浅色底需要比深色底更浓的
强调色和更深的次要文字，因此 accentLight 和 labelLight 是各自独立的值。

它重新设计的内容

| 界面区域 | 处理方式 |
|---|---|
| 页面背景 | 你的壁纸，浅色和深色使用不同图片 |
| 侧边栏 | 会话列表背后的角色插画，采用垂直渐变，使列表保持干净的底色 |
| 侧边栏文字标识 | 已替换 |
| 新建会话按钮 | 图标已替换 |
| 空状态徽标 | 已替换 |
| 网站图标 | 已替换，通过在 SPA 回退之前占用一个精确路由实现 |
| 输入框 | 强调色边框、模糊、聚焦光晕、中央装饰、手绘风格边角花纹 |
| 消息 | 用户气泡采用高亮色；助手正文获得光晕或模糊底色 |
| 次要文字 | 提高对比度——默认的灰色在插画上会消失 |
| 工具行、卡片、对话框、滚动条、聚焦环、选区 | 全部应用主题 |
| 环境动效 | 飘浮微粒，在 prefers-reduced-motion 下静默 |

一切都限定在一个属性和一个  元素内，效果析构函数会移除两者，因此
卸载插件会精确恢复默认 UI。不修改任何 DeepSeek Harness 源代码。

安装

dsh plugin --profile web add /path/to/dsh-theme

用 link: 安装本地检出不会安装插件自身的依赖。请在此目录中运行一次
npm install，否则配置文件会因 Cannot find package '@deepseek-ai/schemastery'
而启动失败。

快速开始

git clone https://github.com/naniwet/dsh-themes.git
cd dsh-themes && npm install
dsh plugin --profile web add .
然后将一个预设粘贴到 $DSH_HOME/profiles/web/cordis.patch.yml，把
/path/to/... 这些行替换成你自己的图片文件，然后重启。dsh --profile web
--dump-config 会打印合成后的结果，并标明哪一层修改了什么，
这是确认改动是否生效的最快方式。

配置

将 presets/ 中的某个文件复制到你的配置文件的 cordis.patch.yml 中，并把
资源路径指向你自己的图片。切换皮肤就是替换那个块——
不需要再启用第二个插件。

一个 config 块会替换某个条目的整个配置；它不会按键
逐个合并。请把你想保留的每个键都写进这个块里。

美术资源

两个预设都自带 assets/ 下的美术资源，且它们的路径相对于
插件，因此全新检出后无需编辑任何内容即可渲染。任何槽位中的绝对
路径都会覆盖内置文件。

来源说明。 assets/code-geass/ 和 assets/spy-family/ 中的图片是
为本主题制作的 AI 生成（GPT）同人图。它们并非官方工作室
素材。它们所描绘的角色归各自的权利方所有——
Code Geass 归 Sunrise，SPY×FAMILY 归远藤达哉 / 集英社——且两位
权利方均与本项目无关联，也未对其表示认可。使用为
非商业性质。assets/background-light.svg 和 assets/background-dark.svg
是当某个槽位留空时使用的原创抽象后备图。

插件从宿主进程提供每一张图片，因此浏览器永远不需要
访问你的文件系统，路径也永远不会离开本机。

| 槽位 | 建议 |
|---|---|
| backgroundLight / backgroundDark | ≥1920×1080。让主体位于中心偏右——侧边栏覆盖左侧，输入框覆盖中下部 |
| overlay | 透明 PNG，竖版，约 800×1200 |
| iconNewSession | 正方形，≥64×64，简单到在 28px 下也能看清 |
| favicon | SVG 或 512×512 PNG |
| heroLogo | 透明，横向约 3:1 |
| sidebarWordmark | 透明，约 400×100 |
| border9Slice | 120×120，约 40px 圆角，中心透明 |

所有选项

| 键 | 默认值 | 作用 |
|---|---|---|
| palette.accent | #c9a227 | 边框、焦点、装饰——深色方案 |
| palette.accentLight | #8a6d13 | 相同作用，浅色方案；需要更浓密 |
| palette.highlight | #a01c26 | 主按钮、选中项、用户气泡 |
| palette.groundDark / groundLight | #0b0810 / #f3ead6 | 每种方案据此派生其淡色和光晕的基础色 |
| palette.labelDark / labelLight | #e6ddc9 / #46392c | 次要文本；三级文本和说明文字据此派生 |
| palette.displayFont | 宋体衬线 | 仅用于标题和空状态标题；正文保留系统字体栈 |
| backgroundOpacity | 0.5 | 壁纸强度；也控制 halo 效果的均匀程度 |
| readingSurface | halo | halo / panel / none——见下文 |
| overlayPlacement | sidebar | sidebar / corner / none |
| overlayOpacity | 0.30 | 角色美术透过其面板显示的强度 |
| sidebarOverlayHeight | 46 | 角色立绘高度，以侧边栏的百分比表示 |
| overlayWidth | 320 | 角色立绘宽度，单位为像素，仅适用于 corner 放置方式 |
| frameOnToolCards | false | 在工具卡片上绘制九宫格边框；会将卡片的圆角变为直角 |

阅读表面

正文渲染在壁纸之上，因此需要辅助。readingSurface 选择使用哪种方式，两者各有取舍：

- halo（默认）—— 为字形描边。画面完全可见，但文字经过亮度与描边相近的区域时会失去对比度。
- panel —— 在对话栏后方放置一层模糊底色，左右边缘渐隐。始终可读；会遮挡其覆盖的画面。
- none —— 两者皆无。

降低 backgroundOpacity 会缩窄壁纸的明暗范围，这正是让 halo 能在整张图上均匀生效、而非仅在其中间调上生效的原因。

已知限制

- border9Slice 绘制为四个角的花饰，而非完整边框：border-image 会覆盖 border-radius，并阻止背景被裁剪到圆角内，因此完整边框会把 UI 其余部分保持圆角的角落变成直角。
- 内置图标通过其 CSS 模块类名的子串进行匹配。这能在构建哈希变化后依然有效，但无法应对上游的重命名。
- 侧边栏折叠时，侧边栏角色立绘会被隐藏；55px 的窄栏无法显示人物。

添加主题

一个主题是 presets/ 中的一个文件加上 assets/ 中的一个文件夹。无需改动代码：复制一个预设，替换七个调色板值和显示字体，将各个槽位指向你自己的图片即可。如果你制作了主题，欢迎提交 pull request。

许可证

代码采用 MIT 许可证。捆绑的同人画作不在此许可证覆盖范围内——请参见上文的来源说明；这些画作由 AI 生成，非商业用途，角色归其权利持有人所有。