dsh-skin:为 DSH Web 界面换皮肤、设背景与桌宠

前言

DeepSeek Harness(DSH)的 Web 壳层自带 light / dark / system 三套外观,但第三方调色板需要插件接入主题运行时才能持久生效。长时间盯着同一套界面配色,或想在对话窗口背后放一张自定义壁纸,单靠内置选项不够。

dsh-skin 由 KinGao294 维护,在 DSH 内置主题系统之上注册 7 套精选皮肤,并提供本地壁纸层与可拖拽桌宠。选择会写入浏览器 localStorage,刷新后仍保留——思路接近 Codex themes,但面向 DSH 的 --dsw-alias-* token 层。

这是什么

dsh-skin 是一个双端 DSH 插件(dsh.bundle Host 补丁 + dsh.client 浏览器 bundle),当前版本 0.4.0,MIT 许可证。它在 Settings → General 的内置 Appearance 行下方插入三行设置:

  • 皮肤 / Skins — 7 套精选调色板,或 默认 / Default 跟随内置外观。
  • 背景图片 / Wallpaper — 本地图片或粘贴图片/视频 URL,可调透明度、模糊与显示方式。
  • 奶龙桌宠 / Pet — 可拖拽的浮动桌宠,随 Agent 运行状态切换表情,附带 8 种手动贴纸。

插件分类为「趣味换装」,GitHub 仓库:KinGao294/dsh-skin;社区目录页:SkillHub

工作原理

DSH 主题系统基于 design token:Web 壳层预置 --dsw-* token,ThemeRuntime 允许第三方插件通过 ctx.theme.register(...) 覆盖 alias 层(--dsw-alias-*),并按 colorSchemelight / dark)驱动 body[data-ds-dark-theme]

dsh-skin 的 Host 半(lib/index.js)是常规 patch 层,插入 skin loader 入口;浏览器半(lib/client.js,挂载于 /plugins/dsh-skin/client.js)负责:

  1. 注册 7 套皮肤并恢复上次选择;
  2. z-index: -1 固定层渲染壁纸,同时用 ctx.theme.overrideTokens 让主画布(--dsw-alias-bg-base)和侧栏(--dsw-specific-sidebar-fill)半透明,内层卡片、输入框、气泡保持不透明;
  3. 监听 theme/change,在换肤或 light/dark 切换时同步壁纸色调;
  4. 挂载设置行与桌宠,通过 ctx.get("sessions").list() 观察 Agent 运行状态。

七套皮肤

皮肤 id 以 skin-* 命名,避免与官方 @deepseek-ai/dsh-client-ui-console 主题(如 sakuragraphite)冲突。旧版未加前缀的 id 会在读取时自动迁移。

id scheme 风格
skin-ocean dark DeepSeek 蓝深海
skin-graphite dark 中性 monochrome
skin-forest dark 绿色沉静
skin-sunset dark 暖紫色调
skin-midnight dark 纯黑 OLED
skin-paper light 暖色纸张
skin-sakura light 粉色点缀

默认 / Default 会清除存储的皮肤 id,回到内置 system/light/dark 逻辑。DSH 自身只持久化 system/light/dark;第三方皮肤由本插件在启动时重新应用。

自定义壁纸

Settings → General → 背景图片 / Wallpaper 中配置:

  • 选择图片 / Choose image — 本地图片(≤ 2MB,存为 data URL,仅保留在当前浏览器)。本地视频文件不上传,需粘贴 URL。
  • 网址 / URL — 支持 http(s) / data 图片或视频(mp4 / webm / ogv / mov)。blob: URL 会被拒绝(刷新后失效),无需额外媒体服务。
  • 显示方式 / Fitcover / contain / stretch / tile
  • 界面遮罩 / UI wash模糊 / Blur 滑块 — 遮罩越高界面越实,模糊越大背景越柔。
  • 移除 / Remove — 清除壁纸。

壁纸只在半透明的主画布与侧栏区域透出;消息气泡等阅读区域保持实心背景。换肤时半透明表面会跟随当前皮肤的色调重着色。

奶龙桌宠

Settings → General → 奶龙桌宠 / Pet 可开关桌宠、调整尺寸(64–180 px)、重置位置。

桌宠行为:

  • 状态联动 — 回合开始切 thinking,运行中 working,结束 done(带闪光),随后回到 idle;长时间空闲进入 sleeping(Zzz)。
  • 表情包 — 悬停打开 🎨 面板,8 种情绪可选手动切换(idle / happy / thinking / working / done / sad / surprised / sleeping);点击桌宠也会随机切换贴纸数秒。
  • 可拖拽 — 任意位置拖动,坐标写入 dsh-skin:pet-pos
  • 零外部资源 — 全部贴纸为 inline SVG(原创手绘奶龙风格,非授权角色形象),bundle 无额外依赖,任意尺寸清晰。仓库内 preview.html 可预览完整贴纸包。

持久化

以下键保存在浏览器 localStorage

  • dsh-skin:skin
  • dsh-skin:wallpaperdsh-skin:wallpaper-opacitydsh-skin:wallpaper-blurdsh-skin:wallpaper-fit
  • dsh-skin:pet-enableddsh-skin:pet-sizedsh-skin:pet-pos

DSH Host 的 WEB_SETTINGS_NAMESPACES 白名单尚未向浏览器暴露第三方 namespace,因此视觉偏好走 localStorage 而非跨进程同步——与 DSH 当前「浏览器偏好进程本地」的边界一致,同一 origin 下刷新可恢复。

安装与启用

DSH 的插件分发渠道是 npm registry;包需声明 dsh.bundledsh.client。在任意目录执行,将包加入 web profile:

dsh plugin --profile web add -w dsh-skin

-w 必填:每个 profile 自带 pnpm-workspace.yaml,pnpm 9 将 profile 目录视为 workspace 根,裸 add 会报 ERR_PNPM_ADDING_TO_ROOT

命令会在 ~/.dsh/profiles/web 执行 pnpm 安装,并把包写入 dsh.profile.bundles(patch 层插入 skin loader)。安装后需重启 Web 服务:

# 先停止当前实例,再启动:
dsh web

打开 Settings → General 即可使用皮肤、壁纸与桌宠。

若从本地路径开发安装,将包名换为路径:

dsh plugin --profile web add -w /path/to/dsh-skin

典型用法

  1. 启动 dsh web,进入 Settings → General
  2. 皮肤 / Skins 下拉框选一套调色板(如 skin-ocean),界面立即切换;选 默认 恢复内置外观。
  3. 背景图片 / Wallpaper 上传本地图或粘贴图片 URL,用 界面遮罩模糊 调到可读性与氛围的平衡,显示方式covertile
  4. 打开 奶龙桌宠 / Pet,拖动到不挡操作的位置;观察 Agent 运行时表情变化,或悬停 🎨 手动选贴纸。
  5. 刷新页面确认皮肤、壁纸、桌宠位置均已恢复。

适用场景与注意

适合:

  • 长时间使用 DSH Web 界面、希望换配色或加背景的个人开发者;
  • 需要在同一机器上区分不同工作氛围(深色专注 / 浅色阅读)的用户;
  • 想在不改 DSH 核心代码的前提下体验第三方主题能力的插件作者。

注意:

  • 插件以当前 dsh 进程权限运行,安装前应阅读源码并确认 MIT 许可证与自身安全策略。
  • 壁纸与皮肤偏好仅存当前浏览器 localStorage,换浏览器或清缓存会丢失;大图片受 2MB 本地限制。
  • 视频壁纸依赖可访问的 http(s) URL,不支持 blob:
  • 客户端 bundle 只能 require module-table 中的实体(平台 seed + 已注册 client bundle),开发扩展时需遵守 DSH rc.6 的模块边界。
  • SkillHub 社区目录为独立站点,与 DeepSeek / 幻方无官方从属关系。

链接

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

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

小夜