Foreword¶
DeepSeek Harness (DSH)’s web shell comes with three built-in appearances: light, dark, and system. However, third-party color palettes require a plugin to integrate with the theme runtime for persistent effects. Staring at the same interface color scheme for a long time, or wanting to place a custom wallpaper behind the dialog window, is not possible with the built-in options alone.
dsh-skin, maintained by KinGao294, registers 7 curated skins on top of DSH’s built-in theme system, and provides a local wallpaper layer and a draggable desktop pet. The selection is written to the browser’s localStorage and persists after refresh—a concept similar to Codex themes, but targeting DSH’s --dsw-alias-* token layer.
What is this?¶
dsh-skin is a dual-sided DSH plugin (dsh.bundle Host patch + dsh.client browser bundle), currently at version 0.4.0, under the MIT license. It inserts three setting rows below the built-in Appearance line in Settings → General:
- Skins — 7 curated color palettes, or Default to follow the built-in appearance.
- Wallpaper — Local images or pasted image/video URLs, with adjustable opacity, blur, and display mode.
- Pet — A draggable floating desktop pet that switches expressions based on the Agent’s running status, with 8 manual stickers included.
The plugin is categorized as “Fun Dress-up.” GitHub repository: KinGao294/dsh-skin; community directory page: SkillHub.
How it works¶
DSH’s theme system is based on design tokens: the web shell predefines --dsw-* tokens, and ThemeRuntime allows third-party plugins to override the alias layer (--dsw-alias-*) via ctx.theme.register(...), driving body[data-ds-dark-theme] based on colorScheme (light / dark).
The Host side of dsh-skin (lib/index.js) is a standard patch layer that inserts a skin loader entry. The browser side (lib/client.js, mounted at /plugins/dsh-skin/client.js) is responsible for:
- Registering 7 skins and restoring the last selection;
- Rendering the wallpaper on a fixed layer with
z-index: -1, while usingctx.theme.overrideTokensto make the main canvas (--dsw-alias-bg-base) and sidebar (--dsw-specific-sidebar-fill) semi-transparent, while keeping inner cards, input boxes, and bubbles opaque; - Listening to
theme/changeto sync the wallpaper hue during skin switching or light/dark toggling; - Mounting the settings row and desktop pet, observing the Agent’s running status via
ctx.get("sessions").list().
Seven Skins¶
Skin IDs are named with the skin-* prefix to avoid conflicts with official @deepseek-ai/dsh-client-ui-console themes (e.g., sakura, graphite). Older unprefixed IDs are automatically migrated upon reading.
| id | scheme | Style |
|---|---|---|
skin-ocean |
dark | DeepSeek blue deep sea |
skin-graphite |
dark | Neutral monochrome |
skin-forest |
dark | Green calm |
skin-sunset |
dark | Warm purple tone |
skin-midnight |
dark | Pure black OLED |
skin-paper |
light | Warm paper |
skin-sakura |
light | Pink accent |
Selecting Default clears the stored skin ID and reverts to the built-in system/light/dark logic. DSH itself only persists system/light/dark; third-party skins are reapplied by this plugin at startup.
Custom Wallpaper¶
Configure in Settings → General → Wallpaper:
- Choose image — Local image (≤ 2MB, stored as a data URL, only retained in the current browser). Local video files are not uploaded; paste a URL instead.
- URL — Supports http(s) / data images or videos (mp4 / webm / ogv / mov).
blob:URLs are rejected (invalid after refresh) and no additional media service is needed. - Fit —
cover/contain/stretch/tile. - UI wash and Blur sliders — Higher wash makes the UI more solid; larger blur softens the background.
- Remove — Clears the wallpaper.
The wallpaper is only visible in the semi-transparent main canvas and sidebar areas; reading areas like message bubbles remain opaque. During skin switching, semi-transparent surfaces recolor according to the current skin’s hue.
Desktop Pet¶
Settings → General → Pet allows toggling the pet, adjusting its size (64–180 px), and resetting its position.
Pet behavior:
- Status link — Switches to
thinkingat round start,workingduring execution,done(with a flash) at completion, then back toidle; long idle enterssleeping(Zzz). - Emoji pack — Hover to open the 🎨 panel, with 8 emotion stickers for manual switching (idle / happy / thinking / working / done / sad / surprised / sleeping); clicking the pet also randomly switches stickers for a few seconds.
- Draggable — Drag anywhere; coordinates are saved to
dsh-skin:pet-pos. - Zero external resources — All stickers are inline SVGs (original hand-drawn milk dragon style, not licensed character images), with no additional dependencies in the bundle, and clear at any size. The
preview.htmlin the repository previews the full sticker pack.
Persistence¶
The following keys are saved in the browser’s localStorage:
dsh-skin:skindsh-skin:wallpaper,dsh-skin:wallpaper-opacity,dsh-skin:wallpaper-blur,dsh-skin:wallpaper-fitdsh-skin:pet-enabled,dsh-skin:pet-size,dsh-skin:pet-pos
DSH Host’s WEB_SETTINGS_NAMESPACES whitelist has not yet exposed third-party namespaces to the browser, so visual preferences use localStorage instead of cross-process synchronization—consistent with DSH’s current “browser preferences are local to the process” boundary, restoring after refresh under the same origin.
Installation and Enabling¶
DSH’s plugin distribution channel is the npm registry; packages must declare dsh.bundle and dsh.client. In any directory, run the following to add the package to the web profile:
dsh plugin --profile web add -w dsh-skin
The -w flag is required: each profile comes with a pnpm-workspace.yaml, pnpm 9 treats the profile directory as the workspace root, and a bare add would throw ERR_PNPM_ADDING_TO_ROOT.
The command runs pnpm installation in ~/.dsh/profiles/web and writes the package to dsh.profile.bundles (the patch layer inserts a skin loader). After installation, restart the web service:
# Stop the current instance first, then start:
dsh web
Open Settings → General to use the skins, wallpaper, and pet.
For development installation from a local path, replace the package name with the path:
dsh plugin --profile web add -w /path/to/dsh-skin
Typical Usage¶
- Start
dsh weband go to Settings → General. - In the Skins dropdown, select a palette (e.g.,
skin-ocean) for an immediate interface switch; select Default to revert to the built-in appearance. - In Wallpaper, upload a local image or paste an image URL, adjust the UI wash and Blur to balance readability and ambiance, and set the Fit to
coverortile. - Open Pet, drag it to a non-intrusive position; observe the expression changes as the Agent runs, or hover over the 🎨 to manually select stickers.
- Refresh the page to confirm that the skin, wallpaper, and pet position have been restored.
Use Cases and Notes¶
Suitable for:
- Individual developers who use the DSH web interface for extended periods and want to change the color scheme or add a background;
- Users who need to differentiate work atmospheres (dark for focus / light for reading) on the same machine;
- Plugin authors who want to experience third-party theme capabilities without modifying DSH’s core code.
Notes:
- The plugin runs with the current
dshprocess permissions; read the source code before installation and confirm the MIT license aligns with your security policies. - Wallpaper and skin preferences are only stored in the current browser’s
localStorage; switching browsers or clearing the cache will lose them. Large images are subject to the 2MB local limit. - Video wallpapers rely on accessible http(s) URLs and do not support
blob:. - The client bundle can only
requireentities in the module table (platform seed + registered client bundles); adhere to DSH rc.6’s module boundaries when developing extensions. - The SkillHub community directory is an independent site with no official affiliation with DeepSeek /幻方.
Links¶
- Community Directory: https://www.skillhub.cn/plugins/KinGao294/dsh-skin
- GitHub: https://github.com/KinGao294/dsh-skin