ycqaq233/dsh-unknown-theme 预览 preview

ycqaq233/dsh-unknown-theme

皮肤Skin 原生Native ⭐ 3 MIT Web 界面Web UI

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

项目介绍Project Overview

dsh-unknown-theme 是 DeepSeek Harness 的官方视觉复刻皮肤,通过纯 CSS/DOM/Canvas 在浏览器端注入 deepseek.com 官网同款 WebGL 流体背景、交互点阵网格、粒子鱼 LOGO、标题聚光灯与磨砂玻璃质感,并随 color-scheme 自动切换浅深主题。适合追求官网沉浸感、想替代默认外观的用户。使用时需 Node ≥18、dsh ≥0.1.0-rc.6 并依赖 WebGL2、Canvas 2D 与 backdrop-filter,安装后需重启 web 并硬刷新浏览器;非官方产品,效果完全由客户端叠加。

dsh-unknown-theme is a DeepSeek Harness skin that code-level replicates the deepseek.com website visuals directly in the browser via pure CSS, DOM, and Canvas. It injects the official WebGL fluid shader background, interactive HeroGrid, particle fish logo, headline cursor spotlight, and frosted-glass cards, auto-adapting to light and dark color schemes. Use it when you want the official-site aesthetic inside DSH. It requires Node ≥18, dsh ≥0.1.0-rc.6, WebGL2, Canvas 2D, and backdrop-filter; install via the standard dsh plugin command, restart the web service, and hard-refresh the browser.

或使用命令行安装(适合开发者)Or use CLI install (for developers)

命令行安装CLI Install

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

ycqaq233/dsh-unknown-theme 加入你的 DSH 配置(web profile)即可启用。

READMEREADME

中文

dsh-unknown-theme ✨

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

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

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

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

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

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

license node dsh plugin type 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!视觉语言参考:

⭐ 支持这个项目

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

📄 开源协议

MIT

🙏 致谢

上一个 Prev dsh-ui-tools 下一个 Next dsh-profile-lab