SciGeoLight

dsh-wallpaper

Name: dsh-wallpaper
Author: SciGeoLight

DeepSeek Harness wallpaper plugin / DSH 壁纸与磨砂玻璃插件

Stars: 0
Language: TypeScript
Created: Aug 15, 2026
Updated: Aug 15, 2026

Theme

GitHub repo Homepage

Introduction

dsh-wallpaper

English | 中文

A DeepSeek Harness (DSH) client plugin that lets users upload a wallpaper and tune the frosted-glass panels — directly from the Harness Settings, with no shell/rebuild edits.

What it does

Adds a “Wallpaper” page to Settings (settings.section).
Upload an image (JPEG / PNG / WebP) to replace the app background.
Tune the frosted-glass surfaces:
- 磨砂程度 / Frost (blur) — the backdrop-filter blur radius.
- 面板不透明度 / Panel opacity — the translucent tint alpha.
- 饱和度 / Saturation — the saturate() factor.
Persists everything to localStorage (survives reload) and applies it at boot, before the settings page is ever opened.

How it works

The Harness paints its background and frosted-glass tokens from a few CSS variables (packages/client/web/src/base.css):

body { background-image: url('/background.jpg'); }
body { --dsw-glass-blur: …; --dsw-alias-bg-base: …; --dsw-specific-sidebar-fill: …; }

This plugin does not touch the shell. On activation it injects a single <style data-dsh-wallpaper> element into <head> that overrides body and body[data-ds-dark-theme] (same specificity, later in the cascade → wins):

body { background-image: url("<data-url>"); }
body { --dsw-glass-blur: blur(24px) saturate(150%);
       --dsw-alias-bg-base: rgba(255,255,255,0.18);
       --dsw-specific-sidebar-fill: rgba(249,250,251,0.18); }
body[data-ds-dark-theme] { … }

The same <style> is re-written on every slider / upload change, and removed on unload.

Note on backdrop-filter: applying it directly to a column turns that column into the containing block for position: fixed descendants (this is what traps the full-viewport Settings panel inside the sidebar). The Harness puts the blur on ::before pseudo-elements instead. This plugin only adjusts the token values, so it inherits that safe structure.

Install

One-click (recommended). Copy the line for your OS. The installer checks Node / pnpm, finds your DSH CLI (dsh, a Harness source checkout, or npx), writes allowBuilds for this plugin into the web profile, then runs plugin add. You do not need to edit pnpm-workspace.yaml by hand.

These commands use jsDelivr so they work where raw.githubusercontent.com is blocked (for example mainland China). Do not use the old raw.githubusercontent.com one-liner — that host often resets the connection.

Windows (PowerShell):

irm https://cdn.jsdelivr.net/gh/SciGeoLight/dsh-wallpaper@main/install.ps1 | iex

If jsDelivr is also blocked, fetch the same script from the GitHub API:

irm -Headers @{ Accept = 'application/vnd.github.raw'; 'User-Agent' = 'dsh-wallpaper' } https://api.github.com/repos/SciGeoLight/dsh-wallpaper/contents/install.ps1?ref=main | iex

Or double-click install.cmd in this folder.

macOS / Linux:

curl -fsSL https://cdn.jsdelivr.net/gh/SciGeoLight/dsh-wallpaper@main/install.sh | bash

If jsDelivr is also blocked:

curl -fsSL -H 'Accept: application/vnd.github.raw' -A 'dsh-wallpaper' \
  'https://api.github.com/repos/SciGeoLight/dsh-wallpaper/contents/install.sh?ref=main' | bash

Then fully restart DSH Web (dsh web, npx @deepseek-ai/dsh web, or pnpm dsh web) and open Settings → Wallpaper (设置 → 壁纸). F5 / a page refresh is not enough — the Harness process must be stopped and started again.

Manual

The plugin ships as a bundle, so dsh plugin add auto-activates it.

dsh plugin --profile web add github:SciGeoLight/dsh-wallpaper
# or from this checkout:
# dsh plugin --profile web add /path/to/dsh-wallpaper
# from a Harness source tree: pnpm dsh plugin --profile web add github:SciGeoLight/dsh-wallpaper

dsh web   # restart so the client-module scan picks it up

Because package.json declares dsh.bundle.patch: "./cordis.patch.yml", the bundle's patch inserts the client row automatically:

# cordis.patch.yml
- insert:
    - id: wallpaper
      name: dsh-wallpaper

Manual (no bundle)

If you prefer to wire it yourself, add it as a plain dependency and insert the row in your profile's patch file (~/.dsh/profiles/web/cordis.patch.yml):

cd ~/.dsh/profiles/web && pnpm add dsh-wallpaper

# ~/.dsh/profiles/web/cordis.patch.yml
- insert:
    - id: wallpaper
      name: dsh-wallpaper

Then restart dsh web. (Plugin-set changes require a restart; the client-modules scan caches negative verdicts.)

Build

tsdown emits both halves of the plugin:

lib/index.js — node half (the host loader imports this to mount the entry).
lib/client.js — browser half (CJS bundle registered into window.__ModuleLoader__.load, with CSS Modules inlined via lightningcss).

pnpm install          # this repo's pnpm-workspace.yaml skips unpublished Harness peers
pnpm run build        # tsdown → lib/index.js + lib/client.js
pnpm run build:types  # optional: emit lib/types/*.d.ts (needs the peer packages installed)

The peer packages (@deepseek-ai/dsh-client-runtime, …/ui-slots, …/ui-settings, …/locale, react) are external in the client bundle — provided by the Harness at runtime, so pnpm run build works without them; they're only needed for build:types (type-checking).

Building inside a Harness checkout

You can also drop this directory under packages/client/ of a deepseek-harness checkout and build with the repo's own pipeline:

pnpm --filter dsh-wallpaper run bundle   # or the root build:lib:client

Usage

Open Settings (bottom of the sidebar).
Open the Wallpaper page.
Upload image → the background changes immediately.
Drag Frost / Panel opacity / Saturation → the frosted panels update live.
Remove image returns to the shipped /background.jpg; Reset to defaults restores the tunables.

Settings are stored per-browser under the dsh.wallpaper localStorage key.

Project layout

dsh-wallpaper/
├── package.json            # name, dsh.client + dsh.bundle.patch, exports, scripts
├── cordis.patch.yml        # bundle patch: inserts the client row
├── tsdown.config.ts        # standalone client-bundle preset (banner + externals + CSS inlining)
├── tsconfig.json
└── src/
    ├── index.ts            # node half (no-op host entry)
    └── client/
        ├── index.ts        # apply(ctx): register section + boot style + cleanup
        ├── WallpaperSection.tsx
        ├── WallpaperSection.module.css
        ├── store.ts        # defineStore + localStorage persistence
        ├── style.ts        # <style> injection (background + frosted tokens)
        ├── image.ts        # File → data URL + canvas downscale
        └── locales.ts      # zh / en dictionaries

License

MIT