ycqaq233

dsh-unknown-theme

Name: dsh-unknown-theme
Author: ycqaq233

DeepSeek 官网视觉风格主题 (dsh-plugin) — 官网流体背景 / 交互网格 / 粒子鱼 LOGO / 标题聚光灯 / 磨砂玻璃，双主题自适应

Stars: 0
Language: JavaScript
Created: Aug 16, 2026
Updated: Aug 16, 2026

Theme

GitHub repo

Introduction

中文

dsh-unknown-theme ✨

把 deepseek.com 的官网气质，搬到你的 DeepSeek Harness。

官网原版流体背景 · 交互点阵网格 · 粒子鱼 LOGO · 标题聚光灯 · 官网质感磨砂玻璃 —— 一套代码级复刻 deepseek.com 视觉语言的浪漫工程。装上即沉浸。

一句话：每次打开 DSH，都像在逛官网首页。 🌊

🌊 官网原版流体	🔲 交互点阵网格	🐳 粒子鱼 LOGO	🧊 官网质感磨砂玻璃

静态 client bundle · 纯 CSS/DOM/Canvas（无 React 依赖）· 双主题自适应 · 免构建免编译

变更日志 · 配置项 · 发布指引

license code size

致敬 deepseek.com 官网设计。 流体 shader、HeroGrid 点阵网格、终端卡片质感均为官网（deepseek.com / harness 落地页）的代码级移植，本插件只是把它们搬进了 DSH。

不是官方产品。 仅供美化你的 DeepSeek Harness 工作区。

📸 实机截图

真机效果，非概念图。浅色 / 深色 × 主页 / 对话，共四张。

浅色主页深色主页
浅色对话深色对话

🏆 为什么值得用（vs 普通换肤插件）

能力	本插件	普通换肤插件
官网原版 WebGL 流体背景（shader 级移植）	✅	❌
官网交互点阵网格（HeroGrid 移植，放大镜观感）	✅	❌
粒子鱼 LOGO（成形后可打散，20s 慢速回正）	✅	❌
标题聚光灯（官网 ds-cursor-ring 同款）	✅	❌
磨砂玻璃质感（harness 落地页终端卡片同款）	✅	部分
浅色 / 深色双主题（跟随 color-scheme）	✅	✅
纯 CSS/DOM/Canvas 实现，零额外依赖	✅	部分

✨ 功能一览

能力	说明
🌊 官网原版 WebGL 流体背景	移植官网 `fluid` shader（simplex FBM + 域扭曲 + curl 噪声、5 色混合、highp、dither 防色带），全屏铺在应用背后；浅色 / 深色两套官网配色
🔲 官网交互网格（HeroGrid 移植）	90px 间距点阵，鼠标 140px 半径内网格线被斥力推开、弹簧回弹；交叉点靠近鼠标变大变亮（放大镜观感）；30fps 节流、静止暂停、底部渐隐
🐳 粒子鱼形 LOGO	新会话页粒子鱼；入场组合动画期间鼠标不产生斥力，鱼形完整成形后才可被打散；入场与回正统一为指数收敛（越靠近中心点恢复越快）——入场快速成形（≈1.2s），成形后被打散以慢系数游回（190px 散开约 22 秒）；单例挂载管理，防双份粒子叠加
💡 标题聚光灯	官网 `ds-cursor-ring` 同款圆环（mix-blend-mode difference 自动反色），只在标题文字 / 鱼图标上触发，容器空白区不触发
🧊 官网质感磨砂玻璃	输入卡、用户历史气泡、侧栏新会话按钮、会话日志按钮统一为 harness 落地页终端卡片质感——`bg-black/20` 深色 tint + `backdrop-blur-xl`（24px）磨砂 + 1px 白 8% 描边；无折射层、无高光、无阴影，hover 仅加深 tint
🌗 双主题自适应	浅色 / 深色自动跟随应用的 `color-scheme`，全部颜色走 CSS 变量按主题切换

🧩 它是什么形式的插件

它是 DeepSeek Harness 的标准「双面插件」（dsh-plugin）——与官方 UI 包同构，只是浏览器半边承担了全部工作。

            ┌────────────── dsh-unknown-theme（标准 dsh-plugin / 静态 client bundle）──────────────┐
            │  dsh.bundle   → cordis.patch.yml 插入 unknown-theme 入口   (host 半边)              │
            │  dsh.client   → lib/client.js（浏览器 bundle）              (浏览器半边)              │
            └─────────────────────────────────────────────────────────────────────────────────────┘

安装命令 = 官方唯一安装命令：dsh plugin --profile web add ycqaq233/dsh-unknown-theme
manifest 契约与官方一致：dsh.bundle + dsh.client + exports["./client"]
浏览器半边免构建：lib/client.js 直接以 window.__ModuleLoader__.load 格式编写，页面加载即注入主题，无需每次会话手动开启

⚡ 快速开始（3 步）

# 1. 安装
dsh plugin --profile web add ycqaq233/dsh-unknown-theme

# 2. 重启
dsh web

# 3. 硬刷新浏览器（Cmd/Ctrl+Shift+R）→ 主题自动生效 → 完。

安装的是 git 仓库直连的正式包。后续发布到 npm 后可改用 dsh plugin --profile web add dsh-unknown-theme。

📦 安装

方式一：git 仓库（当前推荐）

dsh plugin --profile web add ycqaq233/dsh-unknown-theme

然后重启 web 服务，硬刷新浏览器即可看到主题。

方式二：从源码 / 本地目录（开发者）

dsh plugin --profile web add /path/to/dsh-unknown-theme

或手工挂载：~/.dsh/profiles/web/package.json 的 dependencies 写 "dsh-unknown-theme": "link:<克隆目录绝对路径>"，并在 cordis.patch.yml 追加：

- insert:
    - id: unknown-theme
      name: 'dsh-unknown-theme'

🔄 更新 / 卸载

更新（git 安装时）：

cd <克隆目录> && git pull
dsh web   # 重启生效

卸载：

dsh plugin --profile web remove dsh-unknown-theme
dsh web   # 重启后恢复官方外观

🧩 兼容性

项	值
DeepSeek Harness (`dsh`)	`0.1.0-rc.6`+
Node.js	`>=18`（Host 半为 no-op，仅占位）
浏览器	现代 Chromium / WebKit（依赖 WebGL2、Canvas 2D、`backdrop-filter`）

⚙️ 工作原理

主题全部在浏览器半边完成：一个 <style> 注入 + 三个常驻 canvas 渲染器 + 一个 MutationObserver。

      lib/client.js（浏览器半边）
      ├── 1. <style> 注入：主题 CSS（玻璃质感 / 透明化侧栏 / 聚光灯等）
      ├── 2. WebGL 流体 canvas（z-index:-1，官网 shader，30fps 节流）
      ├── 3. 网格 canvas（z-index:-1，流体之上，底部渐隐 mask）
      ├── 4. 粒子 canvas（仅新会话页，单例挂载 + 健康检查）
      └── 5. MutationObserver 监听 <html> 的 color-scheme → 切换浅/深色变量

Host 半边（lib/index.js）：dsh.bundle patch 层，插入 unknown-theme loader 入口；apply 为空操作。
浏览器半边（lib/client.js）：CSS 注入 → 流体/网格/粒子渲染 → 聚光灯 → 主题跟随。
SVG 折射滤镜定义保留在代码中但已不再引用，当前玻璃质感为纯 backdrop-filter 磨砂。

⚙️ 配置项

所有可调参数都在 lib/client.js 顶部：

常量 / 变量	含义
`FLUID_SPEED`	流体流动速度
`FLUID_SCALE`	流体噪声波长（越大形状越宽）
`GRID_SPACING` / `GRID_RADIUS`	网格点阵间距 / 鼠标交互半径
`LERP_ENTRY`	粒子入场组合动画指数系数（位移 = 剩余距离 × LERP，越大越快）
`LERP_SLOW`	成形后被打散的慢速指数回正系数（越靠近中心点恢复越快）
`--lg-bg` / `--lg-border` / `--lg-bg-hover`	磨砂玻璃底色 / 描边 / hover 色（按主题）

⚠️ 已知限制

流体 canvas 位于 z-index: -1，网格 canvas 在其上方并带底部渐隐 mask
backdrop-filter 只用在小组件上（避免 containing block 困住 fixed 浮层）
聚光灯只在 [class$="_headlineText"] / [class$="_fishHitbox"]（标题文字 / 鱼图标）上激活
主题为纯客户端注入，未接入设置页开关面板（插件卸载即完全恢复官方外观）

🛠️ 开发 / 扩展

客户端 bundle 直接以 __ModuleLoader__ 格式编写，免构建。改完 lib/client.js 保存后硬刷新浏览器即可（包名/挂载行变更才需要重启 DSH）。

调流体：FLUID_SPEED / FLUID_SCALE（顶部常量）
调粒子手感：LERP_ENTRY（入场）/ LERP_SLOW（慢速回正，粒子 tick 内）
调玻璃质感：--lg-* 主题变量（paintTheme() 内，深浅色各一组）

📌 Roadmap

官网流体背景 + 交互网格 + 粒子鱼 + 聚光灯 + 磨砂玻璃
浅色 / 深色双主题自适应
发布到 GitHub（dsh-plugin topic）
发布到 npm（一行命令安装）
设置页开关面板（一键关闭全部效果）
更多官网组件移植（Hero 鲸鱼 / 玻璃卡片变体）

🤝 贡献

欢迎提交 Issue 与 PR！视觉语言参考：

deepseek.com（流体 shader 与 HeroGrid 的出处）
harness 落地页（磨砂玻璃卡片质感出处）

⭐ 支持这个项目

喜欢的话，给仓库点个 Star ⭐，或把它转发给你的 DSH 朋友——这会让更多人发现它。想一起移植更多官网效果？欢迎来贡献。

📄 开源协议

MIT

🙏 致谢

视觉语言与实现参考：deepseek.com 官网及 DeepSeek Harness 落地页。
插件形态参考：dsh-dream-skin 的 README 组织方式。