dsh-skin-collection

dsh-skin-collection

Multi-style skin collection for the DeepSeek Harness web GUI. Each skin registers a theme plus scoped decoration CSS; a sidebar picker manages skins and the base color scheme independently — the default style restores the stock UI completely.

English | 简体中文

Skins

Style sources: uiprompt.dev web-styles design prompts; each skin maps the prompt's palette to --dsw-alias-* tokens and its key visual effects to scoped CSS.

How it works

• Skin ≠ theme preference. The stock ThemeRuntime persists only light/dark/system; a skin id held there reverts on every settings save or run-mode switch. This plugin keeps the active skin in its own persisted flag driving a body[data-dsh-skin-<id>] attribute — nothing automatic can revert it.
• The skin owns the scheme. While a skin is active, the base color scheme locks to the skin's design (colorScheme) so dark skins never render light chrome around dark tokens; picking the default style releases the lock and restores your previous preference.
• Palette travels with the attribute: each skin's --dsw-alias-* tokens are also emitted as plain CSS on that attribute, so colors survive any client-tree rebuild.
• Base scheme is independent: 跟随系统 / 浅色 / 深色 switch underneath the skin overlay.
• A skin id picked in the official Settings → Appearance selector is adopted automatically.

Install

# from npm
dsh plugin --profile web add dsh-skin-collection

# or straight from GitHub (prebuilt lib/ committed — no build scripts run)
dsh plugin --profile web add github:NonchalantLudens/dsh-skin-collection

Restart dsh web. Use the 皮肤 button at the sidebar foot to pick a skin; the default style restores the stock look. Skins also appear under Settings → Appearance.

No install-time code execution: the package ships prebuilt artifacts and declares no build scripts.

Structure

• lib/client.js — shipped client bundle in the loader's closure-factory format (hand-written; no build step required for pure CSS/DOM skins)
• lib/index.js — node half (no-op cordis plugin stub)
• src/client/index.ts, src/skins/ — readable source of reference, kept in sync with lib/
• cordis.patch.yml — inserts the plugin into the web roster on install

Adding a skin

1. Append an entry to EXTRA_SKINS (id, label, theme.tokens, optional Google-Fonts imports, scoped css) in lib/client.js.
2. Done — registration, the picker menu, palette emission, and the attribute guard are data-driven.
3. Bump the version and reinstall.

Note: all skins' Google-Fonts @imports are hoisted to the top of one combined decoration sheet (CSS requires @import before other rules); keep per-skin imports in the skin's imports array rather than inside its CSS body.

License

MIT