dsh-homepage-glass

深蓝渐变侧边栏；浅色模式底下可以铺上官网首页那层缓慢流动的蓝，配色是按 deepseek.com 逐像素量出来的。 Deep blue gradient sidebar, with deepseek.com's slowly drifting blue as an option behind the light theme.

截图

同一个皮肤在两种主题下的样子 —— 左侧栏固定深蓝渐变，右侧内容区跟随浅色 / 深色：

浅色模式	深色模式

下面是配色预览（按官网预览图的实测值渲染，不是截图）：

效果

区域	效果
左侧栏	固定深蓝渐变（顶部蓝 → 底部中性深灰），不跟随浅色 / 深色
右侧内容区	保持不透明，正常跟随浅色 / 深色
品牌色	主按钮 / 品牌强调色 = 官网蓝 #4d6bfe（深色 #6799fe）

可选：浅色内容配色（v1.1.0+）

设置 → 通用 → 「浅色内容配色」，给右侧内容区选一层低眩光底色（仅浅色模式生效）：

档位	底色
默认	DSH 原生 #ffffff
官网流动	复刻 deepseek.com 首页缓慢流动的蓝色背景（见下）
雾蓝	#dee5ef

「官网流动」 不是纯色，也不是 CSS 画的——直接跑官网原版着色器：

• 官网实现是 WebGL —— type:"pattern" 着色器，实测配置 colors ["#8AA3D6","#FFFFFF","#FFFFFF"]、speed 14、swirl 12、distortion 20、 scale .5、shape "checks"、shapeScale 10、offsetY 65。
• 本插件把着色器 GLSL 逐字提取，并照搬官网 JS 的参数归一化 （offset/100、rotation/90、proportion/100、softness/100、 shapeScale/100、distortion/100、swirl/50、u_time = 秒×(speed/100)）—— 所以颜色、速度、运动方式与官网一致。时间换算下来约 0.07 秒/秒， 一个特征横穿屏幕约 70 秒。
• 为什么不用 CSS 近似：试过，不成立。色值对不上（不是同一套噪声场）， 速度也差了十几倍。CSS 做不出那个流体场。
• 画布挂在框架内（z-index:-1，画在框架背景之上、内容之下），侧边栏的不透明 渐变正好盖住左半边，接缝天然对齐；向下淡出的遮罩逐字照搬。
• 只作用于浅色模式；30fps 节流、窗口隐藏自动停；系统关闭动效时只画一帧； 没有 WebGL2 时安全退回纯色纸面。

三档着色都是 #3a4f6c（侧边栏顶端）的同色相推导，所以和左侧栏是一套材质， 不会出现"左边冷蓝、右边暖黄"的割裂。底色只改 --dsw-alias-bg-base 一个 token， 因此框架、内容卡片、圆角缺口会一起跟着走（缺口隐形的关系不会被破坏）， 而卡片层表面仍保持白色，浮在着色底上。

偏好由宿主持久化（与 ui-theme 存明暗偏好同一机制），重启后保留。

因为侧边栏是深底，插件会把侧边栏子树内的文字 / 边框 / 交互色固定成浅色， 所以即使当前是浅色模式，侧边栏也是"深底 + 浅字"，不会深底深字读不了。

安装

这是一个 dsh.client 插件，宿主提供全部依赖，零 npm 依赖。

方式一：从 GitHub 安装（推荐）

# 在你的 dsh profile 目录下（例如 ~/.dsh/profiles/desktop）
pnpm add github:Tim5613/dsh-homepage-glass

然后在 profile 的 package.json 里把包名加进 dsh.profile.bundles：

{
  "dsh": {
    "profile": {
      "bundles": [
        "...",
        "dsh-homepage-glass"
      ]
    }
  }
}

方式二：clone 到本地插件目录

git clone https://github.com/Tim5613/dsh-homepage-glass.git ~/.dsh/plugins/dsh-homepage-glass

再把它作为 file: 依赖装进 profile：

cd ~/.dsh/profiles/desktop
pnpm add file:~/\.dsh/plugins/dsh-homepage-glass

（Windows 路径写成 file:C:/Users/<Windows用户名>/.dsh/plugins/dsh-homepage-glass）

方式三：交给 DSH 插件管理器

用 DSH 的插件安装工具指定 file: 规格即可 —— 它会一并写好 package.json、pnpm-lock.yaml 与 dsh.profile.bundles：

install_bundle  target = file:C:/Users/<Windows用户名>/.dsh/plugins/dsh-homepage-glass

生效方式：无需刷新、无需重启。 DSH 的客户端 bundle 是热加载的， 改完磁盘上的 client.js，运行中的界面几秒内就会用上新代码。

所有颜色都是量出来的

对官网预览图逐像素采样（P = a·255 + (1−a)·B 反解），不是肉眼估的。

侧边栏渐变

y	实测		y	实测
6	#3a4f6c		304	#424952
121	#3c4b61		425	#3c4149
182	#3f4b5b		547	#393d45
243	#414a56

关键：饱和度向下递减 —— 顶部蓝 → 中性深灰，底部并不发紫。

面板的白色叠加 alpha

元素	实测 P	同 y 背景 B	反解 alpha
「新会话」按钮	#4d5b6f	#3d4c63	0.083
「选中会话」行	#4f5762	#404752	0.086

→ 参考图的面板就是 8.5% 白。用 10%~16% 会明显"发闷、块状、不像玻璃"。

文字色（区域内最亮像素）

元素	实测
普通条目	#e6e8eb
选中条目	#e3e6e9
分区标题「工作区」	#9399a1（≈ 44% 白）
底部署名	#f4f5f7

实现要点 / 踩过的坑

1. 这套侧边栏 DSH 自带，但被 [data-platform=darwin] 锁死在 macOS。 Windows 上 sidebarCol 只是一条不透明纯色 —— 怎么改颜色 token 都变不出渐变。
2. 侧边栏不是一个元素。 .BynINW_sidebarCol 里嵌着 ui-sidebar 的 SidebarRoot，自带 background:var(--dsw-specific-sidebar-fill) 且 height:100% —— 等于给侧边栏盖了个不透明盖子，只给列上色会被整块挡掉。 → 把该 token 在侧边栏子树内置为 transparent（不依赖哈希类名）。
3. 内容卡片左上 16px 圆角缺口会露出框架底色，白卡片角上出现一块深色"三角圆弧"。 → 框架底色设成 var(--dsw-alias-bg-base)（= 卡片色），缺口隐形。
4. 自己加的顶部高光会留亮带。 inset 0 1px 0 rgba(255,255,255,.16) 实测在圆角处 留下 #6a7492 亮带 —— 正好是"侧边栏色 #4d597d 与 16% 白的混合"。
5. 不能只靠 backdrop-filter。 系统关闭「透明效果」时（Windows 11 的 Transparency effects，Chromium 映射为 prefers-reduced-transparency: reduce）， 浏览器会连模糊一起停用。→ 渐变直接写在侧边栏上，模糊只作加分项。

已知边界：真正的窗口级透明

参考图的通透有一半来自 macOS 原生窗口 vibrancy（Electron 把窗口设为透明 + 系统材质，桌面被实时模糊后透上来）。本插件在渲染层改 CSS，看不到窗口外的桌面； DSH 在 Windows 上创建窗口时也没有开启透明 —— 在 app.asar 的 desktop host 里 找不到 transparent / vibrancy / backgroundMaterial 任何一项配置。

所以本插件能做到的是把参考图的颜色与透明度关系 1:1 复刻； 真正的"看见桌面"需要改客户端本体（给 BrowserWindow 加 backgroundMaterial: 'acrylic'，Windows 11 支持）。

目录结构

├── package.json          插件清单（dsh.bundle / dsh.client 声明）
├── cordis.patch.yml      bundle 层插入条目
├── lib/
│   ├── index.js          宿主侧（空实现，仅保证 loader 条目可解析）
│   └── client.js         客户端侧：注入皮肤样式表 + 品牌蓝 token 覆盖层
├── assets/               浅色 / 深色截图
├── screenshots.json      声明截图，供市场详情页使用
├── preview.png           配色预览（按实测值渲染，非截图）
├── CHANGELOG.md
├── LICENSE
└── README.md

lib/client.js 把样式表注入 document.head（DSH 自身 ui-theme 的同一套做法， 随 ctx.effect 卸载），并用 !important 压过 token 样式表与 ThemePresenter 写在 body 上的内联变量；同时用 ctx.theme.overrideTokens() 注册品牌蓝， 让 theme-color 与主题快照保持一致。

注意：里面的 .BynINW_* 是 ui-layout 的 CSS Module 哈希类名， 已配 [class*="sidebarCol"] 同族兜底；DSH 升级后若哈希变化，兜底选择器仍生效。

自定义

改 lib/client.js：

想改什么	改哪里
侧边栏渐变	SIDEBAR_BG 的 6 个十六进制值
面板浓度	第 ③ 段里的 rgba(255,255,255,.085)
文字色	第 ③ 段的 --dsw-alias-label-*
品牌蓝	第 ⑤ 段的 body / body[data-ds-dark-theme]

License

MIT

---

本项目的配色取自 DeepSeek 官网公开页面的视觉样式，仅作个人客户端主题用途； 与 DeepSeek 官方无隶属关系。DeepSeek、DeepSeek Harness 为其各自所有者的商标。