dsh-theme-firefly:为 DSH Web UI 换上流萤萤火主题

前言

DeepSeek Harness(DSH)的 Web 界面默认走功能向设计,配色与氛围感有限。若你长期在浏览器里跑 dsh web,界面观感会直接影响专注度与使用意愿。社区里已有若干主题插件,通过覆盖设计令牌和注入客户端样式来改变外观。dsh-theme-firefly 走另一条路:以《崩坏:星穹铁道》角色流萤为灵感,把壁纸、配色、开屏动画、粒子、背景音乐和打字音效打包成一套可开关的皮肤,装完重启即可用。下面介绍它的定位、能力与安装方式。

这是什么

dsh-theme-firefly 是 DSH 的 Web UI 主题插件,由 Liu-ZA-81 维护,当前 npm 版本为 0.1.2。它通过 dsh.client 声明注入 @deepseek-ai/dsh-client-ui-theme 槽位,在浏览器端注册 cordis 主题模块,覆盖 100+ 个 --dsw-* 设计令牌,并叠加壁纸、粒子、音频等身份层效果。

仓库地址:https://github.com/Liu-ZA-81/dsh-theme-firefly。社区目录页:https://www.skillhub.cn/plugins/Liu-ZA-81/dsh-theme-firefly

核心功能

流萤配色

主题采用深空海军蓝黑、萤火虫青绿(#00ff87 / #7dff9e)与莹白文字的组合。ctx.theme.register 注册令牌后即时生效,覆盖 DSH Web UI 的配色体系。

壁纸系统

壁纸以全屏 cover 铺底,界面容器半透明,左侧暗、右侧亮的渐变遮罩保证聊天区可读。

通过界面「景」按钮打开常驻设置面板,支持:

  • 动态(mp4)与静态(图片)两种类型,各自独立记忆当前壁纸
  • 缩略图网格选择、多选移除、随机轮换池与自定义间隔(默认 5 分钟)
  • 从本机一次多选导入图片或视频,同名同大小自动去重,写入 IndexedDB 持久化
  • 首次安装无历史记录时,优先展示内置 assets/Default_wallpaper.png

开屏变身动画

每次页面刷新播放内嵌 GIF 开屏动画,带绿色辉光边框与「流萤 // FIREFLY」标题。点击任意处或「点击跳过」可跳过;系统 prefers-reduced-motion 为真时自动跳过。

萤火氛围粒子

「萤」按钮分四档:关、星点(12)、曳光(28)、流萤(80)。切换带 0.9s 淡入淡出,无需刷新页面。

背景音乐与打字音效

「乐」按钮控制背景音乐开关,弹出迷你播放卡片,支持上一首、播放暂停、下一首与循环模式(单曲循环 → 列表循环 → 随机播放),曲目与模式持久化。默认曲库含 HOYO-MiX 出品的《使一颗心免于哀伤》等曲目。

聊天输入框打字时,Web Audio 实时合成「咔哒 + 低频咚」按键音;「声」按钮可开关。空格与回车音色更低,不依赖外部音频文件。

彩蛋

  • 在输入框发送精确匹配 SAM 可重播开屏变身动画
  • 对话内容触发右下角表情包 GIF(每回合最多一个),按关键词匹配开心、得意、变身、没错、期待、疑惑等情绪

界面操作

四个控制按钮收在可拖动的毛玻璃长条面板中,自右向左为「声」「萤」「景」「乐」。按住面板任意位置可拖动,位置重启 dsh web 后仍记忆。音乐卡片、壁纸设置与壁纸选择器相对面板水平居中,并自动保持在屏幕内。按 ESC 可关闭所有浮层。

安装与启用

推荐通过 npm 一条命令安装,npm 包已内置干净版 lib/client.js,无需 git clone 或本地构建:

dsh plugin --profile web add dsh-theme-firefly

装完后重启 dsh web 即生效。

若需修改内置素材,可从 GitHub 以 link 方式安装:

git clone https://github.com/Liu-ZA-81/dsh-theme-firefly.git
dsh plugin --profile web add "link:<本目录绝对路径>"

改完 assets/ 等目录后,运行 node build.cjs --clean 重新构建,再重启 dsh web

卸载:

dsh plugin --profile web remove dsh-theme-firefly

重启 dsh web 后移除生效。

典型用法

运行时添加壁纸:点「景」→「+ 添加壁纸」,从本机多选图片或视频,立即生效并持久化。适合不想改仓库、只想用自己的背景图。

调整粒子与音效:拖动面板到合适位置后,用「萤」选粒子档位、「声」开关打字音,设置随会话保留。

打包自定义素材:把壁纸放入 assets/,音乐放入 music/,开屏动图放入 GIF/,然后执行:

node build.cjs --clean

--clean 只打包 build.include.txt 清单内的官方素材,适合提交或分发;完整构建用 node build.cjs(含第三方素材,仅供本地使用)。

技术实现要点

插件通过 window.__ModuleLoader__.load() 注册 DSH 客户端模块,导出 cordis 插件 { isPlugin, inject: ["theme"], apply }apply(ctx) 中调用 ctx.theme.register 注册令牌并 setTheme 激活;壁纸、粒子、开屏动画等通过注入 <style> 与 DOM 实现。动态壁纸用 <video muted loop autoplay>,静态壁纸用 CSS 背景层,音乐用 <audio>,素材以 base64 data-URI 内嵌进 lib/client.js。架构参考了 dsh-theme-cyberpunk2077 的「令牌层 + 身份层」思路。

适用场景与注意

适合长期在浏览器中使用 DSH、希望界面有统一视觉主题的用户。插件以当前 dsh 进程权限在本地 Web UI 中运行,安装前建议浏览仓库源码与 LICENSE,确认素材版权范围。

主题互斥:多个主题插件都会调用 ctx.theme.setTheme 并注入 !important 令牌样式,后加载的会覆盖先加载的。建议同时只启用一个主题。

素材体积:素材 base64 内嵌进 JS,建议 mp3 ≤128kbps、图片 ≤500KB、视频 ≤1080p,避免页面加载变慢。

版权:代码采用 MIT 协议。仓库随带的官方角色壁纸、音乐、GIF 等素材版权归属米哈游 / HoYoverse / HOYO-MiX;第三方壁纸请勿随仓库公开分发,可通过运行时导入使用。本项目为粉丝同人作品,与米哈游、HoYoverse、DeepSeek 无官方关联。

结尾

dsh-theme-firefly 把流萤的萤火绿配色、壁纸、开屏动画、粒子、音乐与打字音效整合进 DSH Web UI,一条 dsh plugin 命令即可启用。若你想给日常智能体工作台换一套完整皮肤,可以从社区目录或 GitHub 仓库入手:

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜