赛博朋克主题dlpufan/dsh-theme-cyberpunk

dsh-theme-cyberpunk

DeepSeek Harness（dsh）Web 界面的赛博朋克主题插件：RGB 流动霓虹、暗色霓虹城市背景、可自定义背景图库，以及一个右上角可拖动、可收起的 HUD（外观一键切换 + 本地音乐播放器，歌单与播放状态持久化）。

简体中文 · English · 日本語

关于 DeepSeek Harness 插件系统的更多背景，见文末 关于 DSH 插件。

环境要求

- Node.js 22+（dsh 本身要求）
- pnpm（dsh plugin 通过 pnpm 管理插件）
- 已安装并初始化过 DeepSeek Harness（dsh web 可运行）

验证：

node -v     # v22.x
pnpm -v
dsh --help

安装

方式一：dsh plugin add（推荐，自动激活）

在插件目录内执行 .（dsh plugin 会把 . 锚定到当前目录并转发给 pnpm）：

dsh plugin --profile web add .

然后重启 Web profile：

dsh web

刷新浏览器即可。

原理：dsh plugin add = 在 profile 目录里执行 pnpm add，然后 dsh 会自动把声明了 dsh.bundle 的包登记进 dsh.profile.bundles，从而自动激活——本插件声明了 dsh.bundle，所以无需手动改配置。

方式二：从 GitHub 仓库安装

dsh plugin --profile web add "github:dlpufan/dsh-theme-cyberpunk"

也可先 clone 本仓库，再在仓库根目录执行 dsh plugin --profile web add .。

手动激活（备用）

如果 dsh plugin add 没有自动激活（例如用 pnpm 手动安装的），在
$DSH_HOME/profiles/web/cordis.patch.yml 里加对应 insert 行即可：

- insert:
- id: theme-cyberpunk
name: dsh-theme-cyberpunk

注意：cordis.patch.yml 顶层必须是一个 YAML 数组；空文件或纯注释会报错，想全部关掉就写 []。

功能

- RGB 氛围：旋转 RGB 色轮 + 霓虹光斑 + 细密 CRT 扫描线 + 暗角。
- 背景图库：内置暗色霓虹城市图，可添加本地图片并记住选择；新增图片进入图库，可随时切换 / 删除。
- 外观一键切换：赛博 / 默认 按钮，在赛博朋克与默认 UI 间切换，偏好持久化。
- 本地音乐播放器：添加本地音频组成歌单，支持播放 / 暂停、上一首 / 下一首、随机顺序、循环（关 / 列表 / 单曲）、进度拖动与音量；歌单与播放状态（歌曲、进度、音量、随机、循环）都持久化，刷新后回位但不自动播放。

使用

刷新后右上角出现胶囊 HUD：

- ⋮ 手柄：拖动 HUD（位置记住）。
- 「赛博 / 默认」：切换外观，绿点亮起表示赛博朋克开启。
- 音符图标：打开 / 收起音乐播放器。
- 图片图标：打开 / 收起背景图库。
- »：收起为单个音符按钮，点击再展开。

音乐播放器面板：

| 操作 | 说明 |
|---|---|
| + 添加本地音频 | 打开文件选择器，可多选（mp3 / flac / wav 等） |
| 点击歌单中的曲目 | 立即播放该曲 |
| ×（曲目右侧） | 从歌单移除（同时从 IndexedDB 删除） |
| 交叉箭头 | 随机顺序开关（点亮为开启） |
| 上一首 / 下一首 | 切换曲目 |
| 中央圆形按钮 | 播放 / 暂停（渐变霓虹底） |
| 循环箭头 | 循环模式：关 → 列表 → 单曲（点亮为开启） |
| 进度条 / 音量条 | 拖动跳转 / 调音量 |

背景图库面板：

| 操作 | 说明 |
|---|---|
| 「默认背景」 | 切回内置霓虹城市图 |
| 点击缩略图 | 切换为对应背景（选中带青色描边） |
| ×（缩略图右上） | 从图库删除（删除当前项会自动切回默认） |
| + 添加背景图 | 从本地选择图片（多选，加入图库并立即应用最后一张） |

自定义

所有颜色与特效集中在 lib/client.js：

- DARK / LIGHT —— --dsw- token 覆盖值。
- css 里的 --cbx-neon- —— 霓虹原色。
- body[data-cbx-on][data-ds-dark-theme] —— 背景图与蒙层。
- DARK["--dsw-alias-bg-base"] 的 alpha —— 背景图透出程度。

常用调整：

| 想改什么 | 改哪里 |
|---|---|
| 主霓虹色 | --cbx-neon-cyan + DARK["--dsw-alias-brand-primary"] |
| RGB 氛围强度 | body[data-cbx-on]::before { opacity }（默认 0.18） |
| 色轮转速 | @keyframes cbx-spin 的 16s |
| 背景图透出程度 | DARK["--dsw-alias-bg-base"] 的 alpha |
| 换背景图 | 替换 client.js 里 base64 的 data:image/jpeg;base64,... |
| 扫描线开关 | 删掉 body[data-cbx-on]::after 整段 |
| 关闭动效 | 系统开启「减少动态效果」时自动禁用 |

目录结构

.
├── package.json           # dsh.bundle（自动激活）+ dsh.client（浏览器半边）
├── cordis.patch.yml       # 自插入 patch
├── lib/
│   ├── index.js           # node 半边（空 apply）
│   └── client.js          # 浏览器半边：token + RGB 特效 + 背景图 + HUD
├── README.md              # 本文件（简体中文）
├── README.en.md           # English
├── README.ja.md           # 日本語
├── LICENSE                # MIT
└── .gitignore

卸载

dsh plugin --profile web remove dsh-theme-cyberpunk

或从 cordis.patch.yml 中删除对应 insert 行，再重启。

关于 DSH 插件

DeepSeek Harness 用 Cordis 插件框架组装。一个 profile（如 web）由「bundle 层 + 用户 patch 层」叠加而成：

- bundle：package.json 里声明 dsh.bundle.patch 的包，其 cordis.patch.yml 会作为一层 patch 叠加，向组合里 insert 插件条目。
- client 插件：声明 dsh.client 的包，其 exports["./client"] 是浏览器半边（window.__ModuleLoader__.load），由 dsh-client-modules 扫描并注入到页面。
- host 插件：main 入口就是 Node 半边。

本插件做成「自插入 bundle」：dsh plugin add . 安装后即自动激活，无需手改配置。

许可

MIT