Preface

The philosophy of DSH is “Everything is a plugin”, but the appearance of the Web interface has always followed the default theme. To change colors, one usually has to modify the frontend source code, and after modifying, one has to maintain a fork that follows upstream upgrades. dsh-theme-ti offers an alternative approach—stacking a complete token overlay as a client-side plugin, without touching any original files. Coinciding with the Dota 2 The International season, the author created a TI6 theme: Deep Space Blue-Black, TI6 Red Ribbon, and Immortal Shield Gold, with vector wings and a starry sky background drawn on the main panel.

Below is an introduction to what this plugin does, how to install it, and how to adjust it as needed.

What is this

dsh-theme-ti (package name @dsh-theme/ti, version 1.0.0) is a DeepSeek Harness Web UI client skin plugin maintained by longyu065, under the MIT license. It does two things:

  1. Overlay a complete TI token layer via theme.overrideTokens() to replace all colors;
  2. Draw vector wings + starry sky background on the main chat panel, accompanied by a toggleable ribbon animation layer.

How it works

The skin mechanism of dsh Web is provided by @deepseek-ai/dsh-client-ui-theme: there is a ThemeRuntime on the browser side (service name theme) with built-in light / dark themes, and all colors go through --dsw-alias-* / --dsw-specific-* CSS variables.

The browser half of this plugin (client.js) builds two layers of coverage on this mechanism:

  1. Token layer: Use theme.overrideTokens() to stack a complete overlay. Light corresponds to the “TI Light” light variant (cool blue-white + dark navy text + TI6 deep red accents), Dark corresponds to “TI Dark” (deep space blue-black + scarlet energy).
  2. Background layer: Inject <style>, draw the wings.svg (vector wings) + starry sky SVG double-layer background on the chat scroll area ([data-conversation-scroll]), switching between light and dark sets based on data-ds-dark-theme. Sidebars, bubbles, cards, and input boxes retain their respective opaque surfaces, while only the chat scroll area draws the background.

A notable design detail: The plugin does not write any theme preference, so the async preference read-back (adopt()) of the ui-theme service will not reset the skin.

Installation and Activation

One-click installation:

dsh plugin --profile web add longyu065/dsh-theme-ti

Manual installation is also possible, taking the Windows web profile as an example ($DSH_HOME defaults to %USERPROFILE%\.dsh, Linux/macOS is ~/.dsh):

  1. Put the package into the target profile’s dependency tree:
$dest = "$env:DSH_HOME\profiles\node_modules\@dsh-theme\ti"
New-Item -ItemType Directory -Force $dest | Out-Null
Copy-Item "dsh-theme-ti\*" $dest -Recurse -Force   # or git clone then copy
  1. Append to the profile’s cordis.patch.yml (e.g., $DSH_HOME\profiles\web\cordis.patch.yml):
- insert:
    - id: theme-ti
      name: '@dsh-theme/ti'
  1. Restart dsh web. The new loader line belongs to a plugin collection change and requires restarting the process; after that, modifying bundle content can use HMR hot reloading, and refreshing the page is sufficient.

No settings are needed after activation: Light mode is TI Light, dark mode is TI Dark, and under default system preference, it is the TI skin. The ribbon animation layer can be toggled in “Settings → TI6 Wings”.

A note on package structure: index.js is a no-op host half, whose purpose is to allow the loader line to be activated so that client-modules scan can include this package; the real skin logic is all in client.js (build artifact, with wings inlined as base64). The browser half is self-contained — no imports, no JSX, no TypeScript.

Uninstallation

One-click uninstallation:

dsh plugin --profile web remove longyu065/dsh-theme-ti

Manual uninstallation involves deleting the profiles\node_modules\@dsh-theme\ti directory and the theme-ti line in the patch, then restarting dsh web.

Customization: Colors and Images

To adjust colors, modify TI_TOKENS in client.js. Token names follow dsh-client-ui-theme/lib/styles/design-platform.css, and each override value must be a { light, dark } string pair. The accompanying tokens.md in the package is a mapping table of TI colors and tokens.

To change the wing image, follow these steps:

  1. Put the new image in the repository root (preferably wings.svg, otherwise use wings.png);
  2. Adjust WINGS_OPACITY at the top of build.mjs as needed (opacity, default 0.4);
  3. Run build and self-test:
node build.mjs      # re-inline base64 into client.js
node smoke-test.mjs # self-test
  1. Synchronize client.js to the profile’s installation directory, and refresh the page to take effect (HMR).

Use Cases and Notes

This plugin is suitable for developers using the DSH Web interface who want to quickly switch to a complete color scheme—especially Dota 2 players, or authors who want to reference “how to override dsh Web theme via plugin”: its token override syntax, background injection method, and handling of not writing preferences are all implementations that can be directly referenced.

Two reminders before installation: The plugin runs with the permissions of the current dsh process; it is recommended to review the source code before installing third-party plugins. The license is MIT, and the package structure, token overrides, and build scripts are transparent, facilitating self-review.

If you are looking for a template to change the skin as a whole without modifying source code, or just want to change the atmosphere of your current DSH interface for the TI season, you can try directly:

  • Directory page: https://www.skillhub.cn/plugins/longyu065/dsh-theme-ti
  • GitHub: https://github.com/longyu065/dsh-theme-ti