dsh-client-ui-wallpaper
中文 | English
预置壁纸 / default wallpaper
中文
🎯 用途
给 dsh 的 Web GUI 换壁纸的浏览器端插件。
📥 安装
dsh plugin --profile web add github:tippykafuu/dsh-client-ui-wallpaper
dsh plugin --profile web add link:<本仓库路径>
# 重启 dsh web 生效
🎨 自定义
node build-client.mjs # 换成 assets/wallpaper.png
node build-client.mjs <图片路径> # 换成指定图片
构图调参在 styles/wallpaper.css 的 :root 里：
| 变量 | 作用 | 默认值 |
|---|
--dsh-wallpaper-size | 尺寸，auto 高度 表示宽度按比例 | auto min(78vh, 58vw) |
--dsh-wallpaper-position | 贴在哪个角 | right 2.5vw bottom -1vh |
--dsh-wallpaper-tint | 压在壁纸上的底色浓度，越大越淡、文字越清楚 | 浅色 62%，深色 70% |
改完重跑 node build-client.mjs 再刷新。
🧹 卸载
dsh plugin --profile web remove dsh-client-ui-wallpaper
# 重启 dsh web 生效
🧩 扩展
styles/wallpaper.css 就是这个插件注入页面的全部内容，改样式直接往里加选择器。
换构图 / 换浓度：改上面那三个变量。注意 .pI_x6G_frame 和 .wSkVaW_root 两条置空规则要
同时保留，只留一条的话，壁纸会在 App 挂载后被盖住。
让更多区域透出壁纸：给对应容器的 background 加 transparent !important，或把它的底色
token 改成半透明（例如左侧栏用的 --dsw-specific-sidebar-fill）。左侧栏默认实心是刻意保留的。
加多张壁纸 / 做切换：需要往设置页加一项。客户端半边在 inject 里声明要用的客户端服务
（如 slots、settingsScope），在 apply(ctx) 里注册设置行；build-client.mjs 里把单张图
改成按选项切换的多份 data URI。
把图片移到外部：现在图片内联在 bundle 里。想换成外部资源，可以让宿主半边
lib/index.js 注册一条 webserver 路由把 assets/wallpaper.png 发出去，样式改成指向那个 URL；
代价是插件不再自包含，多一个运行时依赖。
加宿主侧能力：lib/index.js 是标准的 Cordis 插件，可以 inject 宿主服务、注册路由、往
index.html 注入行，和 dsh 自带宿主插件的写法一致。
改名：三处要一起改——package.json 的 name、build-client.mjs 生成的 bundle id、补丁
行的 name。bundle 的 id 必须等于包名，exports["./client"] 必须指向构建产物，这两条不能破。
🗂️ 文件
| 文件 | 用途 |
|---|
package.json | 包声明：插件名、dsh.bundle、dsh.client、客户端入口 |
cordis.patch.yml | 挂载层：把插件行插进 profile 的插件树 |
lib/index.js | 宿主半边，空的 Cordis 插件 |
lib/client.js | 浏览器半边（构建产物，勿手改） |
styles/wallpaper.css | 壁纸样式 |
assets/wallpaper.png | 壁纸原图 |
build-client.mjs | 构建 lib/client.js |
verify-install.mjs | 安装自检 |
🖼️ 图片声明
assets/wallpaper.png 来自互联网，版权归原作者所有，此处仅作示例与个人使用。本仓库的 MIT
许可只覆盖代码，不覆盖该图片；如需商用请自行替换为已获授权的图片。原作者如有异议，提 issue
即可，会立即移除。
📜 许可
MIT
English
🎯 What it does
Changes the wallpaper of the dsh Web GUI.
📥 Install
dsh plugin --profile web add github:tippykafuu/dsh-client-ui-wallpaper
dsh plugin --profile web add link:<path to this repo>
# restart dsh web to take effect
🎨 Customize
node build-client.mjs # use assets/wallpaper.png
node build-client.mjs <image path> # use a specific image
Composition is tuned in styles/wallpaper.css, under :root:
| Variable | Purpose | Default |
|---|
--dsh-wallpaper-size | Size; auto <height> keeps the aspect ratio | auto min(78vh, 58vw) |
--dsh-wallpaper-position | Which corner it sticks to | right 2.5vw bottom -1vh |
--dsh-wallpaper-tint | Tint layered over the image; higher = fainter wallpaper, clearer text | light 62%, dark 70% |
Re-run node build-client.mjs after editing, then reload.
🧹 Uninstall
dsh plugin --profile web remove dsh-client-ui-wallpaper
# restart dsh web to take effect
🧩 Extending
styles/wallpaper.css is everything this plugin injects into the page — add selectors there to change
how it looks.
Reframe / retint: change the three variables above. Keep both blanking rules, .pI_x6G_frame and
.wSkVaW_root; with only one of them the wallpaper is covered again once the app mounts.
Let more areas show through: add transparent !important to that container's background, or make
its fill token translucent (for example --dsw-specific-sidebar-fill for the left sidebar, which is
opaque on purpose by default).
Several wallpapers / a switcher: this needs a row in Settings. Declare the client services you need
in inject (for example slots, settingsScope), register a settings row inside apply(ctx), and turn
the single image in build-client.mjs into several data URIs selected by that option.
Move the image out of the bundle: the image is inlined in the bundle today. To serve it externally,
have the host half (lib/index.js) register a webserver route for assets/wallpaper.png and point the
stylesheet at that URL — at the cost of the plugin no longer being self-contained.
Add host-side capability: lib/index.js is a plain Cordis plugin. It can inject host services,
register routes and inject rows into index.html, exactly like dsh's own host plugins.
Renaming: change three places together — name in package.json, the bundle id that
build-client.mjs emits, and name in the patch row. The bundle id must equal the package name, and
exports["./client"] must point at the built file; neither of those can break.
🗂️ Files
| File | Purpose |
|---|
package.json | Package manifest: plugin name, dsh.bundle, dsh.client, client entry |
cordis.patch.yml | Mount layer: inserts the plugin row into the profile tree |
lib/index.js | Host half, an empty Cordis plugin |
lib/client.js | Browser half (build output, do not edit by hand) |
styles/wallpaper.css | Wallpaper styles |
assets/wallpaper.png | Source wallpaper image |
build-client.mjs | Builds lib/client.js |
verify-install.mjs | Install self-check |
🖼️ Image notice
assets/wallpaper.png comes from the internet. Copyright belongs to its original author, and it is
included here only as a sample for personal use. This repository's MIT license covers the code only,
not the image — replace it with a licensed image before any commercial use. If the original author
objects, open an issue and it will be removed right away.
📜 License
MIT
↑ 回到顶部 / Back to top
