Wallpaper skin for the DSH Web UI: image background with opacity, mask and blur controls.
Install
# from GitHub (first run asks for allowBuilds approval — follow the hint, retry)
dsh plugin --profile web add github:chinaRXQ/dsh-wallpaper
Any plugin you install runs third-party code with your own permissions — it can read your files, use your credentials, and reach the network, and tool approvals don’t sandbox it. GitHub-sourced plugins also run build scripts at install time. Only install sources you trust, and pin a commit (github:owner/repo#sha).
README
用一张图片作为 DSH Web 界面的窗口背景,并可通过右下角小面板实时控制:
- 图片透明度(0–100%)
- 面板透明度(0–100%,越小背景图越透)
- 压暗遮罩(0–100%,提高文字可读性)
- 背景模糊(0–40px)
原理
- 在
<body>里插入两个固定全屏层:#dsh-wallpaper-bg(背景<img>,object-fit: cover+referrerpolicy="no-referrer"以绕开防盗链)与#dsh-wallpaper-mask(遮罩),并把应用根节点#root抬到z-index: 1,图片层垫在应用之下。 - 把
--dsw-alias-*语义 token 用color-mix()改为半透明(!important压过主题 presenter 的内联 token),让图片从所有面板后面透出来;浅色 / 深色两套底色分别处理。 - 配置存于浏览器
localStorage(key:dsh-wallpaper:v1)。图片支持本地文件(自动缩放并压缩成 JPEG,稳稳落进 localStorage 配额)或 http(s) 链接(应用前先探测能否加载,失败会在面板提示)。
文件
| 文件 | 说明 |
|---|---|
package.json |
包元数据:dsh.bundle.patch(可被 dsh plugin add 安装)+ dsh.client.platform=web、immediately=true、exports["./client"] |
cordis.patch.yml |
bundle patch:把 dsh-wallpaper 插入 composition |
index.js |
host half(空实现,仅满足 cordis loader 导入) |
client.js |
浏览器 half:window.__ModuleLoader__.load({ id: "dsh-wallpaper", factory }),含样式注入、背景层、控制面板 |
安装
发布到 npm 后(或直接以 GitHub 仓库 owner/repo 形式),一条命令装进 web profile:
dsh plugin --profile web add dsh-wallpaper # npm 包名
# 或
dsh plugin --profile web add <owner>/dsh-wallpaper # GitHub 仓库
然后启动 web:
dsh --profile web
本机开发时的做法(源码在
~/Desktop/harness/dsh-wallpaper/):改动后把client.js index.js package.json cordis.patch.yml同步到~/.dsh/profiles/web/node_modules/dsh-wallpaper/,并在~/.dsh/profiles/web/cordis.patch.yml里保留- insert: [{ id: wallpaper, name: 'dsh-wallpaper' }],再重启 web 服务。
使用
- 页面右下角出现 🖼 按钮,点开面板:
- 选本地图片 / 粘贴图片链接 → 应用;
- 拖动滑块实时调整透明度 / 遮罩 / 模糊;
- 「移除图片」或「恢复默认」关闭壁纸。
- 配置自动保存在浏览器本地,刷新 / 重开浏览器仍生效(换浏览器需重新设置)。
卸载
dsh plugin --profile web remove dsh-wallpaper
然后重启 web 服务。
备注
- 需要较新的浏览器(
color-mix(),Chrome/Safari/Firefox 2023+ 均支持)。 - 第三方主题(
ctx.theme.register注册的皮肤)与壁纸半透明层可共存;壁纸层的 token 覆盖优先级更高。 - 显示不出来的常见原因已做处理:HEIC(iPhone 照片)无法解码会明确提示、过大的本地图会自动压缩、链接失效/防盗链会在面板报错;如仍显示黑色背景,请打开浏览器开发者工具 Console 看
[dsh-wallpaper]开头的报错。
Links
More in this category
Small-tailqwq/dsh-deep-whale★ 625
Whale-girl skin series for the DSH Web UI (maid-atelier).
KinGao294/dsh-skin★ 10
Codex-style skin switcher plus a custom wallpaper layer with opacity and blur controls.
PAKIKNOWLEDGE/dsh-client-ui-skin-claude★ 3
Claude-style skin with a warm-black canvas, clay accent, and serif UI that follows the native light and dark themes.
starslittle/dsh-blue-whale★ 3
DeepSeek-Chat-style blue-whale skin: brand #4D6BFE on light and dark, following the built-in appearance.
Tkingxiao/dsh-any-background★ 3
A DeepSeek Harness appearance plugin that lets you fully customize the Web UI with a custom theme color, background wallpaper, and fine-grained opacity controls.
tianyhjg-lab/dsh-font★ 2
Font switcher for the DSH Web GUI: 99 UI fonts and 31 code fonts with CJK-Latin pairing stacks, instant apply and localStorage persistence.