dsh-plugin-style

dsh-plugin-style

Multi-style skin collection for the DeepSeek Harness web GUI. Each skin registers a theme plus scoped decoration CSS; a small icon at the sidebar foot opens a menu that 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.
• The skin sets the opening scheme. Picking a skin moves the preference to the skin's design scheme once, so dark skins never render light chrome around dark tokens. After that your own choice stands: the menu's 外观 group keeps switching 跟随系统 / 浅色 / 深色 while a skin is on. 关闭皮肤 in the 皮肤 group restores the stock look.
• 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.
• The menu has two groups: 外观 (跟随系统 / 浅色 / 深色 — the stock preference, nothing else) and 皮肤 (关闭皮肤 first, then every skin).
• A skin id picked in the official Settings → Appearance selector is adopted automatically.
• Where the picker lives. One 28px circle at the sidebar foot (sidebar.footer.action), beside the Settings row rather than stacked above it: the wide column gets the circle, the rail gets the same 36px box as every other rail control. It sits above Settings and stays mounted while the settings modal is open, so it is reachable in every desktop state. The icon takes the brand color while a skin is active.
• Redundant way in, and an off switch. Settings → General carries the same picker plus a switch that hides the foot button; hiding it never strands the feature, because the settings row keeps the menu.

Install

# from npm
dsh plugin --profile web add dsh-plugin-style

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

Restart dsh web. Click the gear icon at the sidebar foot to pick a skin; the default style restores the stock look. Skins also appear under Settings → Appearance. Settings → General carries the same picker plus a switch that shows or hides the foot button.

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