dsh-image-skin

dsh-image-skin

Your DSH web UI — but it finally looks like *yours*.

npm: dsh-image-skin · one-line install: dsh plugin --profile web add dsh-image-skin

Drop your own images, GIFs and looping video onto the big regions of the DeepSeek Harness web UI, stick draggable stickers on the sidebar and composer, let the whole interface take its colour from your wallpaper, and decide how much the panels let through. No account, no upload, no cloud — everything stays on your machine.

中文说明 → README.zh-CN.md

*The plugin at work — a wallpaper behind frosted panels, with the UI's colours sampled from the picture. Everything you see here is local: the image, the palette, the stickers.*

What it does

· 🖼️ Per-region artwork · Window backdrop, center column, sidebar, welcome/empty state, right panel, composer — each with its own image, fit mode and on/off switch. 🎬 Motion · A looping mp4/webm as the window backdrop, GIFs anywhere, one slider for playback rate. 🌗 **Light *and* dark, configured separately · Two independent sets of artwork; flipping the theme swaps the wallpaper too, and a shared image is the fallback. 🧸 Stickers · Two free-floating images on the sidebar and the composer — drag to move, drag the corner to scale, positions persist. 🫧 Panel translucency** · One slider makes DSH's own surfaces see-through so the wallpaper shows through — while the wallpaper itself is deliberately *not* dimmed. 🎨 The interface takes colour from your picture · Buttons, inputs, dialogs and rails stop being grey: one hue is sampled from your wallpaper (a real frame, even for video), every step is contrast-checked, and the depth slider is stepless. 🪶 Smooth, and it stays smooth · Big DOM, long conversation — the cross-fade only animates what a compositor can, and stops touching text colour when the tree gets heavy. 🗜️ Upload-optimised · Big pictures are downscaled to a 2560px longest edge and re-encoded to WebP inside the browser before they are stored (GIF / SVG / video untouched). Less disk, and a noticeably lighter settings page. 📦 Skin pack · The whole skin (images + every setting) as one file: back it up, move machines, hand it to a friend. Import only adds, and an API key never travels in a pack. 🔒 Local-only, and reversible · Files live in $DSH_HOME/image-skin/. Disable the plugin and every style, sticker and video layer it added goes away.

A feature that came and went. An early line of work tried *letting a text-to-image model draw an

ornamental border* around panels ("AI ornament"). We built it, shipped it publicly, and then judged

it not good enough — an ornament frame collapses into a colour clash on a 30px button. The UI

entry was removed; the code stays in git history (e19c633 / 34c3002 / b66006e). **This version

does not do that.** The colour screen now does exactly one thing: sample, and tint.

Why this one

There are several plugins in this space, and most of them do the same thing: take one picture and generate a colour palette from it. This one takes the opposite approach — you place artwork exactly where you want it — and does a few things the others do not:

• Artwork, not just a palette. A window backdrop, a sidebar image, a sticker you can drag — these

are first-class here. (A single auto-picked colour scheme is *not* what this is.)

• The whole scheme from one hue. The sampler's colours are reduced to a single hue; every role

(hairline / ink / surface) is derived from it and contrast-checked, so the UI *harmonises* instead of clashing. The depth slider only decides how deeply the colour is laid on (淡 / 标准 / 浓 / 呼吸), never *what* gets drawn.

• Built for the long haul. Other implementations stutter on a long conversation; this one only

animates compositor-friendly properties and drops text-colour work on heavy trees.

• Reversible by design. Turn it off and nothing is left behind.

*Same interface, another wallpaper — panels, hairlines and ink all re-derive from the new picture.*

Install

DSH composes its web UI from a profile, and dsh plugin is a thin passthrough to pnpm inside that profile.

# 1. from npm
dsh plugin --profile web add dsh-image-skin

#    ...or from a local checkout
git clone https://github.com/Hwayn-pixel/dsh-image-skin.git
cd dsh-image-skin
npm install
npm run build
dsh plugin --profile web add -w .

# 2. restart the web host so the profile is recomposed
dsh --profile web --no-open

# 3. hard-refresh the browser (Ctrl+F5)

The bundled helper does steps 1–2 for you: node scripts/install.mjs --profile web (add --dry-run to preview the commands it would run).

⚠️ Desktop app (Electron) users — read this first. Versions ≤ 0.4.1 declare the client service

settingsScope, which DSH 0.2 removed. DSH 0.2 treats a client entry that never activates as a

fatal boot error, so the desktop app refuses to start:

web boot: 1 entry did not activate — dsh-image-skin: pending (waiting for service: settingsScope).

0.4.2 and newer are fine. If your installer keeps handing you 0.4.1, ask for the version **by

name** — a pinned install bypasses the age policy:

`

dsh plugin --profile web add dsh-image-skin@0.4.8 # or: pnpm add dsh-image-skin@0.4.8

`

**In the desktop app's plugin installer, type the same thing — dsh-image-skin@0.4.8, not just the

package name.** A bare name is a *range*: pnpm's minimumReleaseAge (default: one week) only

auto-picks versions that old, so it will silently install something ancient (measured: 0.3.0), or

error with The latest release of dsh-image-skin is … when the range you asked for is too new.

A pinned name@version is exempt.

“I want the newest build right now” — go straight to the official registry (mirrors lag minutes):

`

npm i dsh-image-skin@latest --registry=https://registry.npmjs.org/

`

(npm has no release-age policy, so a bare name is fine there.)

(The app's own “禁用第三方插件… / disable third-party plugins” recovery button also gets you back in.)

Usage

Settings → 图片皮肤 / Image skin. Two screens, usable independently:

「贴图」/ Images — put the artwork in:

• 正在编辑 / Editing — a segmented control for 浅色模式 / 深色模式, i.e. *which set of images you

are editing*. Flipping it also flips the live theme, so you configure what you see.

• 界面区域 / Regions and 角标贴图 / Stickers — one card per area: thumbnail, name, where

its artwork comes from (浅色专用 / 两模式共用 / 未设置), and its controls.

• 全局效果 / Global — panel opacity, video playback rate.
• 存储 / Storage — 清理未使用图片 collects stored files no area references any more.
• 皮肤包 / Skin pack — export the whole skin (settings + every referenced image) as one

dsh-image-skin-YYYY-MM-DD.pack.json, or import such a file back. Import adds missing images and never deletes stored files; files that already exist are skipped, and accentApiKey in a pack is ignored (the receiving machine keeps its own key).

「配色」/ Colour — let the interface follow the picture (give the Window region an image first; the palette is sampled from it):

• Depth, 0 – 4, stepless — 0 is a whisper (a single hairline), each step lays the colour on more

deeply and follows the light in the picture. The interface updates *while* you drag.

• Colour routes — three, and the difference is visible at a glance:
• 整屏染色 (*wash*) — every surface carries the hue, hairlines everywhere; the UI reads as soaked in colour;
• 只染三处 (*marks*) — surfaces stay neutral, only the selection, the focus ring and one rule are coloured;
• 双声部 (*duo*) — surfaces borrow the main hue, interaction colour uses the picture's second hue.
• 取自壁纸 / Sampled — shows the colours it took, plus the material it recognised

(sky / paper / wood / water / neon).

Control · Meaning Upload · image, GIF, mp4 / webm (≤ 24 MB) Shared image · one image used by both modes unless a mode overrides it 启用 · per-area on/off 填充 · cover / contain / tile (regions only) 编辑位置 · stickers only — drag to move, corner handle to scale 面板不透明度 · one slider for all DSH surfaces Skin pack · export / import the whole skin (never carries an API key)

Sampling and tinting happen entirely on your machine: no network, no cost, no key.

Uploads are optimised in the browser before they are sent: anything whose longest edge exceeds 2560 or that is heavier than 700 KB is re-encoded to WebP (q=0.88) on a canvas; GIF, SVG and video are stored untouched (a canvas would flatten an animation), and a re-encode that comes out larger is discarded in favour of the original.

Compatibility

Developed and tested against @deepseek-ai/dsh@0.1.5-rc.1.

DSH is a Cordis-based app: this plugin is one row in the web profile, contributing a settings namespace (host) and a settings.section page (browser). Region hosts are located through CSS-module class-name suffixes (_centerCol, _sidebarCol, _hero, _pane, _composerSeat, …) rather than hashed prefixes, but they are still DSH internals: a release that renames them can break region targeting. Panel translucency overrides the documented theme tokens (--dsw-alias-bg-base, --dsw-alias-bg-layer-1/2, --dsw-alias-bg-overlay, --dsw-specific-sidebar-fill, --dsw-specific-app-shell) and nothing else.

Development

npm install
npm run build       # src/index.ts -> lib/index.js (ESM host half)
                    # src/client/index.ts -> lib/client.js (browser half, ModuleLoader format)
npm run watch       # rebuild on change
npm run typecheck   # tsc --noEmit
npm test            # offline suite: 99 host assertions + 38 client units, no DSH process, no network

lib/ is committed on purpose — DSH loads the built halves — and prepublishOnly rebuilds it so a published artifact can never drift from src/.

Extending

1. add an id to IMAGE_AREAS in src/index.ts — the settings schema is generated from it;
2. add the same id and a label to AREAS in src/client/index.ts;
3. add a REGION_SELECTORS entry, and clean it up in disposeSkinDom() if it adds DOM.

A note on maintenance 🐢

This is a student side-project. I build it in the gaps between classes and coursework, so replies and fixes can be slow — please bear with me.

That said: issues, ideas and pull requests are genuinely welcome, and I read every one. If you enjoy the plugin, a ⭐ helps a lot — it tells me the thing is worth coming back to.

Credits / 图片致谢

The gallery images are not part of the plugin; they are licensed wallpapers used to illustrate the docs.

File · Author · License 01-aurora-lyngen.jpg — *Aurora borealis above Storfjorden and the Lyngen Alps in moonlight* · Ximonic · CC BY-SA 3.0 02-milkyway-la-silla.jpg — *Milky Way Arching Over La Silla* · P. Horálek / ESO · CC BY 4.0 03-winter-night-moon.jpg — *Winter night in mountains with moon* · Maciej Kraus · CC BY 2.0 04-misty-lake-sunrise.jpg — *Misty Morning Sunrise, Lake Andes NWR* · USFWS · Public domain

All four were retrieved from Wikimedia Commons and resized; only the resized copies live in this repository.

Authors / 作者