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

Theme id	Style	Scheme	Signature effects
wabi-sabi	Wabi-Sabi 侘寂	light	Earth palette, paper grain, serif type, sepia images, Enso boot fade, vermillion DSH seal brand mark
terminal	Terminal 终端	dark	Phosphor green on void black, VT323 mono, CRT scanlines + text glow, blocky scrollbar
cyberpunk	Cyberpunk 赛博朋克	dark	Cyan/magenta/acid neon on deep teal, Space Grotesk, scanlines, chamfered images
film-noir	Film Noir 黑色电影	dark	Chiaroscuro vignette, film grain, Oswald + typewriter body, grayscale photos with hover restore
swiss	Swiss 国际主义	light	Off-white grid, Inter black uppercase headings, Swiss red accents, sharp corners
bauhaus	Bauhaus 包豪斯	light	Primary-color flat geometry (red/blue/yellow), Jost, no shadows, red scrollbar
brutalism	Brutalism 野性主义	light	4px black borders, hard 2D shadows, warning-yellow blocks, grain overlay
dark-glass	Dark Glass 暗黑玻璃	dark	Deep navy with blue/violet/cyan ambient glow, frosted code panels, sleek scrollbar
pixel-retro	Pixel Retro 像素复古	dark	Indigo arcade, Press Start 2P headings, CRT scanline + vignette, pixel box-shadows

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.
• 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-client-ui-skins

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