界面换肤 Necthak/dsh-skin

dsh-skin — Web GUI 自定义皮肤工具

给 DeepSeek Harness 的 Web 页面 (http://127.0.0.1:3080) 换肤的小工具。
核心原理: 页面所有颜色都由 CSS 变量 (--dsw-*) 驱动, 本工具把 skin.json 里的配色生成为一份后加载的 skin.css, 覆盖内置配色, 不改动任何原始文件。

预览

预览图 1

预览图 2

项目结构

dsh-skin/
├── Apply-Skin.ps1 # 换肤脚本 ├── skin.json # 配色 + 背景图定义（图片用相对路径，指向 assets/） ├── assets/ # 内嵌的背景图/图标（克隆即用，无需再准备图片） └── README.md

背景图/图标已全部内嵌进 assets/，skin.json 用相对路径引用。
克隆仓库后直接运行 Apply-Skin.ps1 即可，无需改路径或补图片。

使用步骤

1. 编辑 skin.json, 把颜色改成你喜欢的 (见下方键名表)。
2. 双击运行或在终端执行:

powershell -ExecutionPolicy Bypass -File C:\Users\25099\Documents\dsh-skin\Apply-Skin.ps1

3. 回到浏览器, 按 Ctrl+F5 强制刷新页面, 即可看到新皮肤。
4. 想再调颜色 → 重复 1-3 步 (每次都会自动加时间戳, 浏览器一定拿最新版)。

还原默认外观

powershell -ExecutionPolicy Bypass -File C:\Users\25099\Documents\dsh-skin\Apply-Skin.ps1 -Revert

规则

- 本皮肤仅在浅色模式生效（modes: "light"）；深色模式保持系统默认外观。
- 值是任意 CSS 颜色写法: #aabbcc、rgb(1,2,3)、rgba(1,2,3,0.5)、
hsl(...)、或 var(--dsw-alias-xxx) (引用另一个变量)。
- 删除某个键 = 该项保持内置默认。
- 每改一次运行一次脚本; 不改文件只刷新页面不会生效。

键名表 (40 个旋钮)

| 键 | 对应 CSS 变量 | 作用 |
| bg-base | --dsw-alias-bg-base | 页面最底背景 |
| bg-layer-1 | --dsw-alias-bg-layer-1 | 一级浮起表面 (内容卡等) |
| bg-layer-2 | --dsw-alias-bg-layer-2 | 二级嵌套表面 |
| bg-layer-3 | --dsw-alias-bg-layer-3 | 三级表面 (菜单等) |
| bg-module | --dsw-alias-bg-module-platform | 模块平台底色 |
| bg-overlay | --dsw-alias-bg-overlay | 弹层/气泡面板背景 |
| border-l1 | --dsw-alias-border-l1 | 最淡边框 |
| border-l2 | --dsw-alias-border-l2 | 常规边框 |
| border-l3 | --dsw-alias-border-l3 | 较强边框 |
| brand-primary | --dsw-alias-brand-primary | 主品牌色 (浅色模式是主按钮的墨色) |
| brand-accent | --dsw-alias-brand-primary-new-colorprimary-new-color | 品牌强调蓝 (加载圈、信息按钮等) |
| brand-text | --dsw-alias-brand-text | 品牌色上的文字 |
| button-primary-fill | --dsw-alias-button-primary-fill | 主按钮填充 (默认跟随 brand-primary) |
| button-primary-hover | --dsw-alias-button-primary-hover | 主按钮悬停 |
| button-info-fill | --dsw-alias-button-info-fill | 信息/强调按钮填充 |
| button-info-hover | --dsw-alias-button-info-hover | 信息按钮悬停 |
| hover-wash | --dsw-alias-interactive-bg-hover | 悬停时的一层淡色 |
| active-wash | --dsw-alias-interactive-bg-active | 按下时的一层淡色 |
| text-primary | --dsw-alias-label-primary | 主文字 |
| text-secondary | --dsw-alias-label-secondary | 次级文字 |
| text-tertiary | --dsw-alias-label-tertiary | 最弱文字/占位 |
| text-link | --dsw-alias-label-primary-bluish | 链接文字 |
| state-success | --dsw-alias-state-success-primary | 成功状态色 |
| state-warn | --dsw-alias-state-warn-primary | 警告状态色 |
| state-error | --dsw-alias-state-error-primary | 错误状态色 |
| code-block | --dsw-alias-markdown-code-block | 代码块背景 |
| code-inline | --dsw-alias-markdown-inline-code | 行内代码背景 |
| bubble | --dsw-specific-bubble | 助手消息气泡背景 |
| bubble-highlight | --dsw-specific-bubble-highlight | 气泡高亮/引用块 |
| input | --dsw-specific-input-major | 输入框背景 |
| menu | --dsw-specific-menu | 菜单背景 (默认跟随 bg-layer-3) |
| selector | --dsw-specific-selector | 选择器面板背景 |
| sidebar-fill | --dsw-specific-sidebar-fill | 侧栏底色 |
| sidebar-hover | --dsw-specific-sidebar-nav-item-hover | 侧栏项悬停 |
| sidebar-active | --dsw-specific-sidebar-nav-item-active | 侧栏项选中 |
| sidebar-active-accent | --dsw-specific-sidebar-nav-item-active-accent | 侧栏选中项的强调色条 |
| scrollbar-thumb | --dsw-alias-scrollbar-bg-l1 | 滚动条滑块 |
| scrollbar-thumb-hover | --dsw-alias-scrollbar-hover-l1 | 滚动条滑块悬停 |
| tooltip | --dsw-alias-tooltip-bg | 提示气泡背景 |
| toast | --dsw-alias-toast-bg | 通知条背景 |

背景图片 (对话区 / 侧栏)

在 skin.json 顶层加 images 段，可以给对话窗口和侧栏设置背景图:

"images": {
"conversation": { "file": "C:\\壁纸\\对话背景.jpg", "fit": "cover", "overlay": 0.45 },
"sidebar": { "file": "C:\\壁纸\\侧栏背景.png", "fit": "cover", "overlay": 0.5 }
}

| 字段 | 说明 |
| file | 图片文件路径 (相对路径 = 相对本工具目录); 留空 "" = 该区域不用背景图 |
| fit | 铺法: cover 拉伸铺满(默认) / contain 完整显示 / tile 平铺 |
| overlay | 蒙层强度 0~1: 在图片上叠一层当前模式的底色, 越大文字越清晰、图片越淡; 0 = 完全不加蒙层 |

- 支持 png / jpg / jpeg / webp / gif / avif / svg。
- 图片会被复制进 dist 的 assets\skin-images\ 下由页面加载。
- 想撤销某张背景图: 把对应 file 改回 "" 或删掉该区域, 重新运行脚本。
- 注意: 背景越花, 建议 overlay 调越大 (0.5~0.7), 否则文字看不清。

注意

- 本工具直接修改 DSH 安装目录里 dsh-web-frontend\dist 下的
index.html (注入一行 ) 和 assets\skin.css (生成的配色)。
原始 index.html 会备份为 index.html.dsh-skin.bak, -Revert 可完全还原。
- 如果将来 npx 缓存路径变化导致脚本找不到 dist 目录, 用 -Dist 参数指定:

powershell -ExecutionPolicy Bypass -File .\Apply-Skin.ps1 -Dist "C:\...\dsh-web-frontend\dist"

Fan Work Notice / 同人作品声明

This is an unofficial, non-commercial fan-made skin/theme tool for the DeepSeek Harness Web GUI. It is not affiliated with DeepSeek or other rights holders. Names, logos, and recognizable designs belong to their respective owners. This repository is intended for personal desktop customization and technical learning; it does not grant commercial rights to any underlying intellectual property.

本项目为非官方、非商业的 DeepSeek Harness 同人换肤工具，与 DeepSeek 及其他权利方无隶属或授权关系。名称、标识及可识别形象的相关权利归各自权利方所有。本仓库仅用于个人桌面定制与技术学习，不授予对任何底层知识产权的商业使用权。