Foreword

If you use dsh web daily, you have likely encountered this situation: the interface only has the official theme and light/dark modes, and if you want to change the look and feel, there is no ready-made entry. DSH’s philosophy is “everything is a plugin,” so the interface appearance can also be delegated to a plugin.

The dsh-skin-picker introduced below is such a plugin: after installation, a “Skin” line will appear in “Settings → General”. Clicking a color block, typing a description, or placing a background image can change the entire page’s color scheme.

What is this

dsh-skin-picker is a DSH (DeepSeek Harness) skinning plugin, categorized as “Fun Cosplay”. The current version is 0.6.0 and it uses the MIT license. The code is hosted on GitHub (repository owner Lzh-12), and the plugin author is credited as Aaron111.

It solves a specific problem: providing skinning capabilities for the web interface without modifying the DSH core itself, including preset skins, generating color schemes by description, custom background images, interface control linkage, and cross-device synchronization.

Core Features

Preset Skins: 10 built-in skins with light/dark palettes that automatically follow the current mode. They are: Sea Salt Blue, Sakura Pink, Mint Green, Warm Sun Orange, Lavender Purple, Graphite Grey, Cream Beige, Aurora Cyan, Berry Red, Forest Green.

Natural Language Skinning: Enter a description (e.g., “Cyberpunk Neon”, “Japanese Matcha”), and the plugin automatically generates a color scheme. Implementation-wise, it consists of two layers: a built-in library of 15 semantic keyword groups for matching; if no match is found, arbitrary text falls back to deterministic HSL color tuning, ensuring a result for any input.

Custom Background Image: Upload a local image or paste a URL to set as the page background. The plugin will overlay a readability mask, writing to the background stack of --dsw-alias-bg-base (mask + image cover).

Interface Control Linkage: Skinning changes more than just the primary color. Input fields, bubbles, buttons, tabs, and gradients will all follow the color scheme. This is achieved through derived tokens (e.g., --dsw-specific-*, --dsw-static-deepseek-*, --dsw-alias-button-*) combined with inline !important as a double safety net.

Cross-Device Sync: Skin selection is written to settings.yaml. The host side uses settings.register to register a namespace, then syncs via the connection RPC channel, with localStorage as a local fallback. It is worth noting that the settings gateway only opens third-party read/write for whitelisted namespaces; this plugin operates within this constraint.

Restore Default: One-click return to the official theme.

Installation and Activation

Install from GitHub:

dsh plugin --profile web add github:Lzh-12/dsh-skin-picker

Can also install from a local directory:

dsh plugin --profile web add file:./dsh-skin-picker

After installation, you need to restart dsh web and refresh the page to see the “Skin” line in “Settings → General”.

The plugin declares two peerDependencies: @deepseek-ai/dsh-settings ^0.1.0-rc.6 and @deepseek-ai/schemastery ^3.18.1.

Typical Usage

  1. Open Settings → General → “Skin”
  2. Preset Skins: Click a color block to change the skin immediately
  3. Natural Language Skinning: Enter a description (e.g., “Cyberpunk Neon”), click “Generate”
  4. Background Image: Click “Select Image” to upload, or paste a URL and click “Set as Background”
  5. Restore Default: One-click return to the official theme

All operations are completed in this single line of settings; no configuration file changes are needed.

Implementation Details

The browser side overlays a layer of token overrides via theme.overrideTokens(source, tokens). The tokens structure is “token name → { light, dark } value pair,” so it is natively compatible with DSH’s theme system and light/dark modes—when switching modes, the skin palette automatically follows.

The cross-device sync chain is worth looking at separately: the host side (lib/index.js) is responsible for registering the settings namespace and the config RPC channel; the browser side (lib/client.js) is responsible for UI, token overrides, color scheme generation, and synchronization. The plugin as a whole connects via dsh.bundle / dsh.client declarations in package.json and combined patches in cordis.patch.yml.

Also, regarding version changes: the “Image Color Picking Skinning” from 0.5.0 has been replaced by “Background Image” in 0.6.0—the image is no longer used for color picking, but directly laid out as the page background with a readability mask. If you have read the old documentation, please refer to the 0.6.0 behavior.

Applicable Scenarios and Notes

Suitable for developers who frequently use the dsh web interface and wish to adjust the look and feel. It belongs to the category of “Fun Cosplay” plugins and does not change the behavior logic of conversations or agents.

Two reminders:

  1. The plugin runs with the permissions of the current DSH process. Before installing any third-party plugin, it is recommended to check the source code and license first to ensure there is no privilege escalation before installing.
  2. The plugin requires two peer dependencies: @deepseek-ai/dsh-settings and @deepseek-ai/schemastery; version requirements are as mentioned above.

Conclusion

dsh-skin-picker has fully implemented “skinning” as a plugin: from preset palettes and natural language color generation, to background images, control linkage, and settings.yaml cross-device synchronization. Uninstalling or clicking “Restore Default” returns to the official theme without invasive changes to the core.

  • Community directory page: https://www.skillhub.cn/plugins/Lzh-12/dsh-skin-picker
  • GitHub repository: https://github.com/Lzh-12/dsh-skin-picker