Spotify 绿调主题 msnlyy-rgb/dsh-spotify-theme

DSH Spotify 主题

为 DeepSeek Harness Web 客户端打造的 Spotify 风格换肤——近黑色表面、分层灰色卡片、白/灰文字，以及标志性的 Spotify 绿（#1ed760 / #1db954）点缀。以单个即插即用的 CSS 覆盖文件形式提供，另附两个可选的小补丁。

中文用户请看文末「快速安装」。

预览

| 深色 | 浅色 |
| dark | light |

| 主视觉 + 水印 | 折叠侧栏 |
| hero | collapsed |

功能特性

English · 中文

功能特性（EN）

主题
- 深色 + 浅色双配色共享同一结构（均以 Spotify 绿为点缀）
- 完整覆写 --dsw- 设计令牌，配色自动贯穿所有组件

侧边栏
- 折叠时浮起的圆角面板，四周留白对称
- 绿色"新建会话"胶囊按钮、带圆点的绿色分区标题、绿色文件夹图标
- 当前会话以加粗绿色高亮
- 运行中的会话显示"正在播放"风格的呼吸绿色圆点
- 重新设计的会话统计卡，带缓存命中率进度条

主区域
- 任务标题提升为真正的标题样式，工作区面包屑降级
- 输入框获得焦点时呈现绿色弥散光晕
- 用户气泡以绿色色调区分于助手内容
- 对话区域后方大面积斜体"Harness"水印
- 每次切换会话 / 新建会话时淡入上浮过渡动画

细节与无障碍
- 平滑的 hover/focus 过渡动画，:focus-visible 绿色描边
- 遵循 prefers-reduced-motion 偏好设置

功能特性（中文）

主题
- 深色 + 浅色双配色共享同一结构（均以 Spotify 绿为点缀）
- 完整覆写 --dsw- 设计令牌，配色自动贯穿所有组件

侧边栏
- 折叠时浮起的圆角面板，四周留白对称
- 绿色"新建会话"胶囊按钮、带圆点的绿色分区标题、绿色文件夹图标
- 当前会话以加粗绿色高亮
- 运行中的会话显示"正在播放"风格的呼吸绿色圆点
- 重新设计的会话统计卡，带缓存命中率进度条

主区域
- 任务标题提升为真正的标题样式，工作区面包屑降级
- 输入框获得焦点时呈现绿色弥散光晕
- 用户气泡以绿色色调区分于助手内容
- 对话区域后方大面积斜体"Harness"水印
- 每次切换会话 / 新建会话时淡入上浮过渡动画

细节与无障碍
- 平滑的 hover/focus 过渡动画，:focus-visible 绿色描边
- 遵循 prefers-reduced-motion 偏好设置

安装

1. 复制样式表

找到已安装的 dsh 前端 dist 目录。若通过 npx 安装，它位于 ~/.npm/_npx//node_modules/@deepseek-ai/dsh-web-frontend/dist/。

DIST="$(ls -d ~/.npm/_npx//node_modules/@deepseek-ai/dsh-web-frontend/dist | head -1)"
cp spotify-theme.css "$DIST/assets/spotify-theme.css"

2. 引入样式表

在 "$DIST/index.html" 中追加一个 ，位置在现有样式表之后：

3. 重启 / 刷新

刷新 http://127.0.0.1:3080/。若要还原，移除该 （或该文件）即可。

可选补丁

两个可选补丁可启用更宽的折叠侧栏和统计卡进度条（两者都需要编辑打包后的客户端 JS）。在本仓库目录下运行：

python3 patches/patch_rail_width.py
python3 patches/patch_stats_card.py
每个脚本都接受一个可选的 @deepseek-ai 目录路径：

python3 patches/patch_rail_width.py ~/.npm/_npx//node_modules/@deepseek-ai

这些补丁是针对 dsh 0.1.0-rc.7 编写的。CSS 依赖于该构建版本中几个带哈希的 CSS 模块类名；--dsw- 令牌覆盖是版本稳定的，但组件级规则在未来的版本中可能需要重新定位。

兼容性

- 已使用 DeepSeek Harness 0.1.0-rc.7 测试
- 不包含任何密钥、路径或个人数据——本仓库仅包含 CSS 和两个小型补丁脚本。

许可证

你自己的主题作品由你自行决定许可方式。这些补丁针对的是 DeepSeek Harness，其采用 MIT 许可证；本仓库按原样提供，不附带任何担保。

快速安装（中文）

1. 把 spotify-theme.css 复制到 dsh 前端目录：
DIST="$(ls -d ~/.npm/_npx//node_modules/@deepseek-ai/dsh-web-frontend/dist | head -1)"
cp spotify-theme.css "$DIST/assets/spotify-theme.css"

2. 在 "$DIST/index.html" 里，于现有样式表之后加一行：

3. 刷新页面即可；删除该 即恢复原样。

可选补丁（加宽折叠栏 + 统计卡进度条）：
python3 patches/patch_rail_width.py
python3 patches/patch_stats_card.py