Introduction¶
When developing with DSH (DeepSeek Harness), the web interface is the part I stare at the most. By default, there is only one appearance. If you want dark mode, system following, or to migrate your VS Code theme, you usually have to manually modify styles, and they disappear after a restart.
The philosophy behind DSH is “everything is a plugin,” and appearance can be handled by plugins too. The dsh-themes introduced below is just such a plugin: built-in palette, light/dark/follow system modes, Open VSX search and install, VS Code theme import, persistent theme library, and restoration after restart.
What is it¶
dsh-themes is the appearance and theme plugin for the DSH runtime, maintained by MangMax, licensed under MIT, with version 0.1.8 in package.json. It covers 95 color tokens of the DSH design platform, switching from surface layers to buttons, scrollbars, Toast/Tooltip, following the theme rather than just changing an accent color.
The architecture of the theme engine (semantic role mapping, dual-seed generation, contrast solving, OKLCH perceptual import mapping) is inspired by t3code (github.com/pingdotgg/t3code).
Core Features¶
Theme Card Model¶
Each theme contains two variant slots: light and dark; all available light/dark variants are aggregated within the slot; imported extensions are aggregated into a theme card. DSH’s native appearance is also a default theme card—deleting an imported theme in use, or clicking “Restore Default Theme,” will revert to it.
Variant Selector & Appearance Mode¶
The variant selector is a column of multi-colored orbs: selected ones enlarge (fixed slot position doesn’t jump), arrows navigate left/right when overflowing, and hovering shows the variant name.
Appearance mode supports Follow System / Light / Dark; light and dark variants automatically switch with the mode; if the theme library is unspecified, the DSH default theme falls back.
Search & Install (Open VSX)¶
Single request search, displaying icon/author/license/rating/last update; hovering over the name or icon shows a details card, clicking opens the extension page or repository. Clicking “Import” completes download, parsing (include merge), and aggregation import in one step; versioned cache allows repeated imports to open instantly.
VS Code Theme Import¶
Three entry points: local extension scan, URL fetch, paste JSON. Local scan directories include:
~/.vscode/extensions
~/.vscode-insiders/extensions
~/.cursor/extensions
Import uses the OKLCH perceptual engine to derive surfaces, workbench specified values have contrast gating, and operation colors are independent of the accent.
Full Token Coverage & Color Editor¶
DSH design platform’s 95 color tokens are all covered by the theme: surface layers (bg-layer-1~3 / floating / overlay), text layers (primary~caption), interactive feedback, buttons, Markdown, state supplements, scrollbars, Toast/Tooltip, sidebar and menus, and other specialized tokens. Runtime state dots (--dsh-state-ongoing → --dsw-static-deepseek-450) also follow the theme.
The “Modify” button on a theme card enters a secondary page: rename, toggle light/dark, hex editing of grouped token color blocks (takes effect immediately), and reset modifications.
Persistence & Cross-platform¶
The theme library is saved to ~/.dsh/dsh-themes.json and restored after restart; persisted data maintains language neutrality and auto-localizes according to DSH language settings (Settings → General → Language) upon display, taking effect immediately upon switching. The “Theme” menu icon in the settings panel is replaced by a palette icon, sourced from the reicon icon set (github.com/dqev/reicon).
Available on Windows / macOS / Linux: network and local file operations are all completed within the host process (global fetch + built-in node modules + fflate memory decompression), without relying on Unix commands like shell’s curl/mkdir/unzip, and works fine under Windows (pwsh).
Installation & Usage¶
Method 1: Install from npm registry (marked as available after README publication):
dsh plugin --profile web add dsh-themes
Method 2: Local one-click build installation, suitable for development iterations:
bash scripts/install.sh
After installing via either method, you need to restart dsh web, then go to Settings → Theme to use it.
Uninstall:
dsh plugin --profile web remove dsh-themes
Or delete the profile dependency and restart dsh web. After uninstalling, the palette overlay is automatically removed, and appearance reverts to default.
Typical Usage¶
First do basic settings: go to Settings → Theme, select an appearance mode (Follow System / Light / Dark), then choose a theme.
- Independent Light/Dark Attribution: Clicking a variant slot only sets the theme for that side’s appearance without switching the appearance mode; light and dark can come from different themes; clicking the card name makes both light and dark sides use that theme simultaneously.
- Edit Custom Theme: Built-in themes cannot be modified directly; click “Copy” first to generate a custom copy, then enter “Modify” to rename and edit the hex values of grouped tokens; changes take effect immediately, and you can reset modifications if unsatisfied.
- Import from VS Code: Choose one of the three methods: scan local extensions, get via URL, or paste JSON; imported themes can be further modified or deleted.
- Search & Install: Search in Open VSX, view the description and links in the card, import with one click; repeated imports use the cache and open instantly.
Development Related¶
The source code is a TypeScript module, packaged by VitePlus (vp) into a DSH plugin function body. Common commands:
bash scripts/install.sh --pack-only # Build and package only, don't install
vp pack # Build only dist/client/index.cjs and dist/host/index.cjs
vp check # Syntax check
The code is split into two parts: client and host; the client is responsible for the settings page UI and the palette engine, while the host is responsible for RPC-side scanning, reading, searching, installing, and persistence.
Use Cases & Notes¶
Suitable users: users who use DSH web for a long time, those who need dark mode or follow system appearance; those who want to bring themes already in VS Code / Cursor; teams who want to customize a complete color scheme for DSH.
Notes before use:
- The plugin runs with the permissions of the current dsh process; it is recommended to check the source code (github.com/MangMax/dsh-themes) and license (MIT) before installing.
- npm release status is subject to reality: Method 1 in the README is marked as “available after publication”; if not yet published, you can use
bash scripts/install.shto build and install locally. - The community plugin directory (https://www.skillhub.cn/plugins/MangMax/dsh-themes) is an independent site and has no official affiliation with DeepSeek or Huaan.
After the steps above, DSH’s appearance changes from a fixed style to a searchable, importable, editable, and persistent theme library. For the plugin directory, see https://www.skillhub.cn/plugins/MangMax/dsh-themes; for source code, see https://github.com/MangMax/dsh-themes.