EdwardHamu/dsh-glassmorphism-theme

dsh-glassmorphism-theme

适用于 DeepSeek Harness Web UI 的 Material Design 3 玻璃拟态主题。

dsh-glassmorphism-theme 预览

此插件应用了现代玻璃拟态（磨砂玻璃）美学，支持
自定义壁纸、透明表面和背景模糊效果。
它仅作用于客户端，将 MD3 设计令牌映射到 DSH 的语义化 CSS 上，而不会
替换 DOM 结构或修改应用程序设置。

功能特性

玻璃拟态效果

- 背景模糊与透明度：侧边栏、顶栏、输入卡片、聊天玻璃层、
设置面板以及所有菜单/传送门均使用 backdrop-filter，模糊值为 10px，饱和度为 115%。
- 半透明表面：聊天气泡和代码块使用 30% 不透明度的背景，
选中的侧边栏行使用 30% 不透明度，同时保持文本和语法高亮的清晰度。
- 嵌套菜单优化：命令菜单和模型菜单使用伪元素玻璃层，
以避免嵌套的 backdrop-filter 冲突，确保模糊效果可见。
- 性能优化的聊天层：固定定位的玻璃背景仅覆盖可见的
聊天视口（而非完整消息列表），在调整大小/布局变化时更新，滚动时从不更新。

自定义壁纸

- 内置壁纸设置：原生设置对话框中的 壁纸 页面支持：
- 本地图片文件（存储在 IndexedDB 中，绝不上传）
- HTTP/HTTPS 图片 URL（经过验证和预加载）
- 填充模式：cover、contain、auto
- 位置：center、top、bottom、left、right
- 可调节暗度的可读性叠加层
- 启用/禁用和清除控件
- 隐私优先的存储：壁纸图片保留在浏览器配置文件的 IndexedDB 中；
轻量级偏好设置使用 localStorage。不会向 DSH 服务发送任何内容。
- 单一固定层：页面底部有一个 position: fixed 壁纸元素，
所有玻璃表面均层叠在其上方。

Material Design 3 基础

- 颜色系统：浅色和深色调色板与 DSH 的 data-ds-dark-theme 同步，
涵盖表面层级、主色/次色/第三色/错误色、成功色和警告色角色。
- 排版与间距：MD3 字体比例和 4dp 网格。
- 高度与交互：克制的阴影、状态层、可见的键盘焦点，
以及无障碍对比度。
- 全面覆盖：侧边栏、会话行、输入框、气泡、菜单、对话框、
设置、表单字段、按钮、滚动条、卡片以及响应式视口调整。

无障碍与兼容性

- 降低透明度模式：遵循 prefers-reduced-transparency（使用相同的 10px 模糊）。
- Backdrop-filter 回退：当 backdrop-filter 不可用时使用透明背景。
- 减少动态效果：遵循 prefers-reduced-motion。

构建

npm install
npm run typecheck
npm run build

从 npm 安装到本地 Web 配置文件
从 npm 安装已发布的包：

dsh plugin --profile web add "@edwardhamu/dsh-glassmorphism-theme"

安装后重新加载 http://localhost:3080。使用现有的 Appearance
设置可在浅色和深色调色板之间切换。

壁纸设置

打开 设置 → 壁纸 来配置你的背景：

1. 选择来源：
- 上传本地图片文件（JPG、PNG、WebP 等）
- 输入 HTTP/HTTPS 图片 URL

2. 调整显示：
- 填充模式：Cover（默认，填满视口）、Contain（适应范围内）或 Auto
- 位置：Center、Top、Bottom、Left、Right
- 可读性叠加层：添加深色色调（0–100%）以改善文字对比度

3. 启用壁纸，以在整个 UI 中激活玻璃拟态效果。

壁纸默认关闭，并存储在浏览器的本地配置文件中。
不会将任何图片或设置同步或上传到 DSH 服务器。