glass-skin — Harness Web UI 透明玻璃皮肤

Name: abyss2021/dsh-glass-skin
Author: abyss2021

DeepSeek Harness 的「透明玻璃」皮肤插件 —— 极光或自选图片作画布，侧栏、弹层、输入框、消息气泡都是半透明磨砂片；壁纸保持清晰，磨砂只加在控件上。

玻璃皮肤效果图（深色）

玻璃皮肤效果图（浅色）

特性

壁纸清晰、磨砂只在控件上：画布不做滤镜也不加颗粒；按钮、会话行、选项卡、输入框卡片、菜单弹层与对话框遮罩各自成片。
展开侧栏是一整块玻璃：左右侧栏展开时整列磨砂，面板内控件自动退回原生平面，不叠两层玻璃；收起后恢复裸照片 + 逐控件玻璃片。
新会话是透明描边：只留它自带的 0.5px 边框，按钮区域读到的就是侧栏那块磨砂；hover 用原生半透明色。
整页工具页同款磨砂：「插件」「自动化任务」这类进主区域的整页内容，自动补上与侧栏同配方的磨砂，正文不再压在照片上。
一套配方两种明暗：颜色全走 --dsw-* token，深浅只换值，不会出现"深色玻璃 + 浅色文字"。
纯客户端、零构建：只有一个 client.js，没有依赖、没有构建步骤；卸载即完全还原。
可调：背景图（本地文件或 URL）、整站浓度、左右侧栏磨砂强度都在设置页里实时生效。
无障碍：尊重 prefers-reduced-motion 与 prefers-reduced-transparency。

安装

要求：带 Web 界面的 DSH profile（dsh web）；pnpm 在 PATH 上（插件安装由它拉包）；DSH 版本见兼容性。

仓库：https://github.com/abyss2021/dsh-glass-skin

命令行（推荐）

dsh plugin --profile web add github:abyss2021/dsh-glass-skin

完整地址等价：git+https://github.com/abyss2021/dsh-glass-skin.git。安装会自动把插件加进 profile 的 bundle 列表并启用。

Web 界面

侧栏 → 插件 → 添加插件，粘贴 github:abyss2021/dsh-glass-skin；装完在插件页启用，刷新页面即可。

plugin_manager 工具

install_bundle，target 填 github:abyss2021/dsh-glass-skin；set_bundle enabled:false 停用，remove_bundle 卸载。

更新和卸载

# 更新：先卸载再装（git 依赖跟随仓库提交）
dsh plugin --profile web remove @local/glass-skin
dsh plugin --profile web add github:abyss2021/dsh-glass-skin

本地开发

dsh plugin --profile web add /path/to/glass-skin   # 目录链接，改 client.js 刷新即生效

直连 github.com 慢或被拦时：给 pnpm 配代理；或改用 GitHub tarball 直链（同一仓库快照，含 docs 截图约 5MB）—— dsh plugin --profile web add https://codeload.github.com/abyss2021/dsh-glass-skin/tar.gz/refs/heads/main （Web 插件页只认 git 地址或 .tar.gz 结尾的链接，这条请走命令行。）

使用

背景与浓度（设置 → 玻璃皮肤）

项	说明
选择文件	浏览器内压到最长边 2560px、JPEG 0.86 存 localStorage（`glass-skin:wallpaper`）
用此 URL	`https://…` 或 `data:`，回车生效
恢复渐变	清空壁纸，回到内置极光
浓度	色调层 0–80%，默认 44（`glass-skin:tint`）；照片太亮、看不清字就往上调
展开的侧边栏	左 / 右各 0–100%，默认 20（`glass-skin:left-panel` / `glass-skin:right-panel`）

选中图片后画布不再漂移并铺满视口（inset: 0 + background-size: cover），四边齐平，不会在边缘露出极光或色调。
data URL 超过约 3.8MB 时不写 localStorage，只在本次会话生效，刷新后回到渐变。

明暗

设置页顶部的外观（深色 / 浅色）切换的是官方 ui-theme 偏好，所以文字配色和玻璃配方同源；官方 Appearance 那行由插件接管隐藏，卸载后自动回来。

实现

纯客户端三层：token、样式表、画布与设置页。Host 半侧只有一个空的 apply。

1. token 层

ctx.theme.overrideTokens('glass-skin', {...})，每个 token 是 { light, dark } 一对，落在 body 内联样式上：

表面：--dsw-alias-bg-base / bg-layer-1..3 / bg-overlay 半透明
侧栏、菜单、输入框、气泡：--dsw-specific-*、--dsw-menu-surface-fill 半透明
弹层磨砂：--dsw-menu-backdrop-filter（40px + saturate）、--dsw-mask-blur（对话框遮罩 16px）
玻璃边：--dsw-elevation-stroke-color 换成白色发丝线；--dsw-alias-border-l1..l4 调成偏冷灰蓝

2. 样式层

client.js 里的 CSS，按段组织：

段	负责
1	`body::before` 画布：图片 + 极光两层，54s 缓慢漂移，不加 filter
2	`body::after` 唯一一层色调，避免相邻区块叠层数不同产生接缝
3–4	框架、侧栏、结构容器全部裸照片；侧栏只留一条 0.5px 细线
4b	去掉侧栏列表顶部的白色渐变淡出
4d	展开的左右侧栏整列磨砂；面板内控件退回原生平面
5	输入框卡片磨砂 + 投影
6	发出的消息气泡与助手步骤磨砂
8	侧栏 / 底栏 / 顶栏控件的玻璃片
8b	新会话按钮透明描边
9	`prefers-reduced-*` 降级
10	整页工具页（`main` 插槽）补磨砂

3. 画布与设置页

设置 → 玻璃皮肤 独立设置页（settings.section）：选图、URL、浓度、左右侧栏强度，全部存 localStorage，没有 Host 状态。

为什么底色几乎是透明的

上游大量结构容器都会自己重刷一层 --dsw-alias-bg-base；一旦它是半透明，同一界面里有的区域叠 1 层、有的叠 2～3 层，交界处就会出现接缝。所以底色压到 0.10，主色调只由 body::after 一层负责，结构容器保持透明。改浓度要改 --glass-tint-*，不是这个 alpha。

调参

只改 client.js，改完刷新页面（无需重装）：

想要	改哪里
更透 / 更实（整站）	`CSS` 里 `:root` 的 `--glass-tint-light` / `--glass-tint-dark`
更透 / 更实（弹层、卡片）	`TOKENS` 里 `--dsw-alias-bg-layer-`、`--dsw-specific-` 的 alpha
弹层更糊	`--dsw-menu-backdrop-filter` 的 `blur()`
换极光配色	`CSS` 里 `:root` 与 `body[data-ds-dark-theme]` 的 `--glass-aurora`
新会话恢复实底 / 换悬停色	第 8b 段；悬停色改 `:hover` 里的 `--dsw-alias-interactive-bg-hover`
整页工具页浓度	默认跟随「展开的侧边栏 → 左侧」；单独调就设 `--glass-main-top` / `--glass-main-bottom`
换背景图	设置页（或 localStorage `glass-skin:wallpaper`）

兼容性

DSH：在 0.2.1-rc.2 上开发验证；只使用稳定的 ctx.theme.overrideTokens / ctx.theme.setTheme、ctx.slots.register/inject、ctx.locale.register、ctx.on('theme/change') 接口。
上游耦合：类名子串选择器（_sidebarCol、_composerSeat、_card、_bubble、_newSession）和插槽锚点（data-slot='main' / data-slot='main.conversation'）。上游重命名时对应特效会静默失效（不报错、不白屏），按新名字改子串即可。
性能：blur 只用在弹层、对话框、输入框卡片、消息气泡四处；低配机掉帧时优先去掉气泡那条。
降级：prefers-reduced-motion 停漂移，prefers-reduced-transparency 撤壁纸与 blur。

项目结构

glass-skin/
├── package.json          # 包清单：dsh.bundle / dsh.client / exports；版本号唯一来源
├── cordis.patch.yml      # 插入插件行
├── index.js              # Host 半侧（空的 apply，皮肤全在客户端）
├── client.js             # Client 半侧：token + 样式表 + 设置页
├── locale/{zh,en}.json   # 展示用元数据
├── docs/                 # 效果图
├── icon.svg
└── README.md / CHANGELOG.md / LICENSE

开发

node --check client.js     # 语法检查

本机是目录链接安装：改 client.js 后刷新页面即可，不需要重装。页面挂着 HMR，通常也会自动换上；没反应就手动刷新。
仓库没有构建步骤，也没有测试套件；视觉验证靠人眼。

版本与变更

当前版本 0.1.0。版本号遵循语义化版本：0.x 期间，适配 DSH 上游的改动按 MINOR 发布、修复走 PATCH；兼容基线与发布流程见 CHANGELOG.md。

许可

MIT

glass-skin — Harness Web UI 透明玻璃皮肤

玻璃皮肤效果图（深色）

玻璃皮肤效果图（浅色）

特性

壁纸清晰、磨砂只在控件上：画布不做滤镜也不加颗粒；按钮、会话行、选项卡、输入框卡片、菜单弹层与对话框遮罩各自成片。
展开侧栏是一整块玻璃：左右侧栏展开时整列磨砂，面板内控件自动退回原生平面，不叠两层玻璃；收起后恢复裸照片 + 逐控件玻璃片。
新会话是透明描边：只留它自带的 0.5px 边框，按钮区域读到的就是侧栏那块磨砂；hover 用原生半透明色。
整页工具页同款磨砂：「插件」「自动化任务」这类进主区域的整页内容，自动补上与侧栏同配方的磨砂，正文不再压在照片上。
一套配方两种明暗：颜色全走 --dsw-* token，深浅只换值，不会出现"深色玻璃 + 浅色文字"。
纯客户端、零构建：只有一个 client.js，没有依赖、没有构建步骤；卸载即完全还原。
可调：背景图（本地文件或 URL）、整站浓度、左右侧栏磨砂强度都在设置页里实时生效。
无障碍：尊重 prefers-reduced-motion 与 prefers-reduced-transparency。

安装

要求：带 Web 界面的 DSH profile（dsh web）；pnpm 在 PATH 上（插件安装由它拉包）；DSH 版本见兼容性。

仓库：https://github.com/abyss2021/dsh-glass-skin

命令行（推荐）

dsh plugin --profile web add github:abyss2021/dsh-glass-skin

完整地址等价：git+https://github.com/abyss2021/dsh-glass-skin.git。安装会自动把插件加进 profile 的 bundle 列表并启用。

Web 界面

侧栏 → 插件 → 添加插件，粘贴 github:abyss2021/dsh-glass-skin；装完在插件页启用，刷新页面即可。

plugin_manager 工具

install_bundle，target 填 github:abyss2021/dsh-glass-skin；set_bundle enabled:false 停用，remove_bundle 卸载。

更新和卸载

# 更新：先卸载再装（git 依赖跟随仓库提交）
dsh plugin --profile web remove @local/glass-skin
dsh plugin --profile web add github:abyss2021/dsh-glass-skin

本地开发

dsh plugin --profile web add /path/to/glass-skin   # 目录链接，改 client.js 刷新即生效

直连 github.com 慢或被拦时：给 pnpm 配代理；或改用 GitHub tarball 直链（同一仓库快照，含 docs 截图约 5MB）—— dsh plugin --profile web add https://codeload.github.com/abyss2021/dsh-glass-skin/tar.gz/refs/heads/main （Web 插件页只认 git 地址或 .tar.gz 结尾的链接，这条请走命令行。）

使用

背景与浓度（设置 → 玻璃皮肤）

项	说明
选择文件	浏览器内压到最长边 2560px、JPEG 0.86 存 localStorage（`glass-skin:wallpaper`）
用此 URL	`https://…` 或 `data:`，回车生效
恢复渐变	清空壁纸，回到内置极光
浓度	色调层 0–80%，默认 44（`glass-skin:tint`）；照片太亮、看不清字就往上调
展开的侧边栏	左 / 右各 0–100%，默认 20（`glass-skin:left-panel` / `glass-skin:right-panel`）

选中图片后画布不再漂移并铺满视口（inset: 0 + background-size: cover），四边齐平，不会在边缘露出极光或色调。
data URL 超过约 3.8MB 时不写 localStorage，只在本次会话生效，刷新后回到渐变。

明暗

设置页顶部的外观（深色 / 浅色）切换的是官方 ui-theme 偏好，所以文字配色和玻璃配方同源；官方 Appearance 那行由插件接管隐藏，卸载后自动回来。

实现

纯客户端三层：token、样式表、画布与设置页。Host 半侧只有一个空的 apply。

1. token 层

ctx.theme.overrideTokens('glass-skin', {...})，每个 token 是 { light, dark } 一对，落在 body 内联样式上：

表面：--dsw-alias-bg-base / bg-layer-1..3 / bg-overlay 半透明
侧栏、菜单、输入框、气泡：--dsw-specific-*、--dsw-menu-surface-fill 半透明
弹层磨砂：--dsw-menu-backdrop-filter（40px + saturate）、--dsw-mask-blur（对话框遮罩 16px）
玻璃边：--dsw-elevation-stroke-color 换成白色发丝线；--dsw-alias-border-l1..l4 调成偏冷灰蓝

2. 样式层

client.js 里的 CSS，按段组织：

段	负责
1	`body::before` 画布：图片 + 极光两层，54s 缓慢漂移，不加 filter
2	`body::after` 唯一一层色调，避免相邻区块叠层数不同产生接缝
3–4	框架、侧栏、结构容器全部裸照片；侧栏只留一条 0.5px 细线
4b	去掉侧栏列表顶部的白色渐变淡出
4d	展开的左右侧栏整列磨砂；面板内控件退回原生平面
5	输入框卡片磨砂 + 投影
6	发出的消息气泡与助手步骤磨砂
8	侧栏 / 底栏 / 顶栏控件的玻璃片
8b	新会话按钮透明描边
9	`prefers-reduced-*` 降级
10	整页工具页（`main` 插槽）补磨砂

3. 画布与设置页

设置 → 玻璃皮肤 独立设置页（settings.section）：选图、URL、浓度、左右侧栏强度，全部存 localStorage，没有 Host 状态。

为什么底色几乎是透明的

调参

只改 client.js，改完刷新页面（无需重装）：

想要	改哪里
更透 / 更实（整站）	`CSS` 里 `:root` 的 `--glass-tint-light` / `--glass-tint-dark`
更透 / 更实（弹层、卡片）	`TOKENS` 里 `--dsw-alias-bg-layer-`、`--dsw-specific-` 的 alpha
弹层更糊	`--dsw-menu-backdrop-filter` 的 `blur()`
换极光配色	`CSS` 里 `:root` 与 `body[data-ds-dark-theme]` 的 `--glass-aurora`
新会话恢复实底 / 换悬停色	第 8b 段；悬停色改 `:hover` 里的 `--dsw-alias-interactive-bg-hover`
整页工具页浓度	默认跟随「展开的侧边栏 → 左侧」；单独调就设 `--glass-main-top` / `--glass-main-bottom`
换背景图	设置页（或 localStorage `glass-skin:wallpaper`）

兼容性

DSH：在 0.2.1-rc.2 上开发验证；只使用稳定的 ctx.theme.overrideTokens / ctx.theme.setTheme、ctx.slots.register/inject、ctx.locale.register、ctx.on('theme/change') 接口。
上游耦合：类名子串选择器（_sidebarCol、_composerSeat、_card、_bubble、_newSession）和插槽锚点（data-slot='main' / data-slot='main.conversation'）。上游重命名时对应特效会静默失效（不报错、不白屏），按新名字改子串即可。
性能：blur 只用在弹层、对话框、输入框卡片、消息气泡四处；低配机掉帧时优先去掉气泡那条。
降级：prefers-reduced-motion 停漂移，prefers-reduced-transparency 撤壁纸与 blur。

项目结构

glass-skin/
├── package.json          # 包清单：dsh.bundle / dsh.client / exports；版本号唯一来源
├── cordis.patch.yml      # 插入插件行
├── index.js              # Host 半侧（空的 apply，皮肤全在客户端）
├── client.js             # Client 半侧：token + 样式表 + 设置页
├── locale/{zh,en}.json   # 展示用元数据
├── docs/                 # 效果图
├── icon.svg
└── README.md / CHANGELOG.md / LICENSE

开发

node --check client.js     # 语法检查

本机是目录链接安装：改 client.js 后刷新页面即可，不需要重装。页面挂着 HMR，通常也会自动换上；没反应就手动刷新。
仓库没有构建步骤，也没有测试套件；视觉验证靠人眼。

版本与变更

当前版本 0.1.0。版本号遵循语义化版本：0.x 期间，适配 DSH 上游的改动按 MINOR 发布、修复走 PATCH；兼容基线与发布流程见 CHANGELOG.md。

许可

MIT

abyss2021/dsh-glass-skin

glass-skin — Harness Web UI 透明玻璃皮肤

特性

安装

使用

背景与浓度（设置 → 玻璃皮肤）

明暗

实现

1. token 层

2. 样式层

3. 画布与设置页

为什么底色几乎是透明的

调参

兼容性

项目结构

开发

版本与变更

许可

Community comments

abyss2021/dsh-glass-skin

glass-skin — Harness Web UI 透明玻璃皮肤

特性

安装

使用

背景与浓度（设置 → 玻璃皮肤）

明暗

实现

1. token 层

2. 样式层

3. 画布与设置页

为什么底色几乎是透明的

调参

兼容性

项目结构

开发

版本与变更

许可

Community comments