Foreword¶

The philosophy of DSH is “everything is a plugin,” and the look and feel of the interface are no exception. However, changing the web interface’s color scheme usually involves manually adjusting the theme configuration: background, panels, sidebar, borders, and accent colors, testing one by one against the color palette.

dsh-image-skin reverses this approach: pick a picture you like, the plugin uses k-means to extract colors from it, automatically generating a light and dark set of theme tokens, letting the entire interface follow the image’s tones. It also comes with an optional desktop pet that provides a visual cue when the agent is working in the background.

What is this¶

dsh-image-skin is a DSH Image Skin plugin, maintained by GitHub user Jack-sun-learner, current version 0.1.0, MIT license. As stated in the plugin’s readme: import PNG/JPG/WebP to automatically generate theme color schemes, with an optional chibi-style pet (procedurally/AI-generated images).

The plugin client platform is web (package.json has dsh.client.platform: web), so use --profile web during installation. The Node engine requires ^22.19.0 || >=24.0.0.

Image Skin: From Image to Theme Tokens¶

Usage is concentrated on the Settings → Image Skin page:

Upload photos to the gallery, supporting multi-select;
Click a thumbnail to apply with one click.

When applied, the plugin does two things.

The first is the color scheme. k-means extracts primary, secondary, and accent colors from the image, automatically generating light and dark theme tokens: background, panel, sidebar, border, brand accent, and text color all follow the image’s primary tones.

The second is the background. The image serves as the page background, with semi-transparent panels revealing the image; opacity and blur can be adjusted, and blur uses canvas pre-baking.

The gallery is displayed as a thumbnail grid: the currently applied item is highlighted as “Applied”; the × in the top right corner of the thumbnail allows deleting a single item. Gallery and skin state are saved in browser localStorage and automatically restored after restart.

Desktop Pet¶

The pet part is optional. A total of 5 preset avatars: Cat, Rabbit, Whale, Dragon, Shiba Inu, totaling 30 GDI+-generated expression assets, size 60–240px adjustable.

The behavior sequence is:

Greeting upon appearance;
Hiding at the right edge of the screen revealing only half its body if no interaction for 30 seconds;
Jumping in response to mouse hover;
Free placement by left-click drag, position automatically remembered;
Close with right-click.

The integration with DSH is the core of this design: the pet polls the host’s /api/dsh-image-skin/busy, entering a thinking state when an agent is detected to be working, and popping up a bubble saying “Done!” upon completion. The pet launch and stop are done via the host API (pet-launch / pet-stop), implemented in PowerShell/WPF without introducing extra dependencies.

Installation and Enablement¶

Install from GitHub (Recommended):

dsh plugin --profile web add github:jack-sun-learner/dsh-image-skin

After installation, restart the web service for it to take effect.

Local development installation:

dsh plugin --profile web add link:D:\AI_video\plugins\dsh-image-skin

The profile handles link: sources by creating a junction pointing to the source code directory, so you don’t need to sync a copy when modifying source code; changes take effect after restarting the web service.

Notes when modifying source code¶

First do a syntax check:

node --check lib/client.js lib/host.js

There are two common pitfalls:

The pet script requires UTF-8 with BOM encoding under PowerShell 5.1, otherwise Chinese comments cannot be parsed correctly;
The pet window position uses Win32 SetWindowPos for physical coordinate positioning—WPF’s built-in Left/Top will place the window off-screen in ghost monitor or virtual desktop scenarios.

Known Limitations¶

The background image scheme relies on panel transparency: the image needs to be revealed through semi-transparent panels. If a specific panel does not support transparency, it will look disconnected; this is expected behavior, not a bug.

Applicable Scenarios and Pre-installation Checks¶

Suitable for two types of people: users who want their DSH web interface to have a personal color scheme; users who want a lightweight agent status cue instead of constantly staring at logs.

Security note: the plugin runs with the current dsh process permissions; you should check the source code and license before installing. dsh-image-skin uses the MIT license, with source code concentrated in lib/host.js (host-side routing), lib/client.js (client-side skin/gallery/pet control/settings page), and the pet/ directory (pet window and asset generation scripts); you can review it before installing.

Summary¶

dsh-image-skin doesn’t do much, but the path is complete: from an image to a set of usable theme tokens, to a desktop pet that reflects agent status, with state stored in localStorage and automatically restored after restart. If you want a bit of personal flair to your DSH interface, give it a try.

dsh-image-skin: Generate DSH theme color scheme from an image, with a desktop pet