dsh-plugin-wallpaper

A DeepSeek Harness (dsh) web plugin that gives the browser UI a cyberpunk skin and a custom background image — both managed from Settings → General.

English | 中文

Features

One Settings row, two sections.

Theme style

Control	Effect
Default	native look (the background image follows its own toggle)
Cyberpunk	neon-bordered sidebar with a cyan→magenta wash, neon icon buttons, magenta glow on hover, highlighted active row

Background image

Control	Effect
preview thumbnail	the current background
enable / disable	turn the background layer on or off
choose image	a local file (downscaled to ≤1920px wide, JPEG, stored per browser)
reset	back to the built-in default
image URL	paste an https:// image URL
dim	0–0.9 darkening scrim, for readability
blur	0–20px
fit	cover / contain

Every choice persists in localStorage (dsh-wallpaper/v1): per browser, nothing leaves the machine.

Requirements

• DeepSeek Harness with the web surface (dsh web) and a profile that supports plugin bundles (dsh plugin).
• The stock web shell (its client module table exposes react and @deepseek-ai/dsh-client-store, which this plugin requires).

Install

dsh plugin --profile web add /path/to/dsh-plugin-wallpaper

Then restart the web server (dsh web): plugin bundles are composed at boot, so a restart is required. Open the GUI and go to Settings → General → Interface skin.

Uninstall:

dsh plugin --profile web remove dsh-plugin-wallpaper

How it works

• Background. One position: fixed; z-index: -1 layer sits behind the app. The app's own tall, base-coloured containers (outer frame, conversation column, sidebars) are made transparent so the layer shows through. The test is height-based (≥50% of viewport height), so a narrow full-height sidebar qualifies on any screen width, while short chips, inputs and cards keep their own opaque fills — text keeps its contrast.
• Skin. Instead of hard-coding hashed CSS-module class names (they change between dsh builds), the plugin tags elements at runtime — the sidebar column, plus every small icon button (≤46px, and the stable _iconButton / _tool / _panelRow / _button suffixes) — and styles them from a plugin-owned stylesheet scoped to html[data-dsh-skin="cyber"].
• Self-healing. A 2-second watchdog re-checks the layer, the transparency and the tags; every fifth tick it rescans the whole tree. SPA re-renders and theme switches are picked up automatically.
• Clean removal. Disabling the background removes the layer, the stylesheet and every inline override it applied.

Custom default image

The published bundle ships a neutral cyberpunk gradient as its default, so no third-party artwork is redistributed. Bake in your own:

node scripts/set-default-image.mjs ./my-wallpaper.jpg
node scripts/set-default-image.mjs --gradient   # back to the gradient

Pre-size the image (about 1600×900 is plenty): the script inlines it as a data URI and does not resize it.

Development

There is no build step. lib/client.js is authored directly in the shell's loader format — window.__ModuleLoader__.load({ id, factory }) with a CommonJS-style require — which is exactly what the host serves from /plugins.

npm test        # structure + surface/skin tests, zero dependencies

Because the host caches plugin bundles in memory at boot, any change to lib/client.js needs a dsh web restart before it is served.

Caveats

• Settings are per browser (localStorage).
• Only tall base-coloured containers are transparentized, by design. A build that paints its background somewhere unusual would simply show less wallpaper; if the base colour token matches nothing, the plugin falls back to "any tall opaque container".
• Verified against dsh 0.1.5-rc.2 web packages.

License

MIT — see LICENSE. The embedded default is a generated gradient; any image you add is your own responsibility.