Introduction¶
The core design philosophy of DeepSeek Harness (DSH) is “everything is a plugin.” In addition to functional extensions, developers often need to customize the interface style to fit different workflows or personal preferences. dsh-trae-skin is a pure-skin plugin. It does not change any business logic in DSH; it only overrides style variables and DOM structure to replace the Web GUI with a visual style featuring a near-black paper surface, a mint-green accent color, and a gradient wordmark status strip.
What It Is¶
dsh-trae-skin is an MIT-licensed plugin maintained by RonnyJung2021. Its core purpose is “full-page skinning.” Based on the officially documented interface of the DSH Web GUI (--dsw-* tokens), it rewrites about 93 page-level color and style definitions. It does not rely on external font files or image resources; all styles are implemented with pure CSS variables and a small amount of inline scripts, with the bundle size kept around 45.7 KB.
Main Features¶
Full-Page Skinning¶
The plugin only recolors through already documented tokens from the product. It does not touch page structure or modify generated CSS-module class names. It covers the page background, elevated surfaces (menus, code blocks), body text, secondary text, borders, and overlay layers.
Three Color Schemes¶
The plugin provides three color schemes:
* Dark: the default scheme; the page background is near-black (#0a0b0d), and the accent color is mint green.
* Light: the page background is pure white, and the accent color adapts automatically.
* Follow Product: the scheme follows DSH engine’s own light/dark setting. When the engine switches light/dark mode, the skin automatically redraws.
One Input Box → a Full Set of Safe Colors¶
In the settings panel, you only need to provide a hex color value (default is #32f08c). The plugin automatically derives a fill color, hover-state color, 12% background tint, legible text color, and two gradient sets from this primary color. Derived text colors pass WCAG AA contrast validation (light background with white text, dark background with black text).
Top Status Strip¶
A fixed 32px status strip is placed at the top of the interface, including the following elements:
* Gradient wordmark: displays DEEPSEEK HARNESS by default; supports 1-24 character customization.
* Indicator: an empty circle when idle; filled when the input is focused or hovered.
* Breathing effect: breathing pulse only when the engine reports “reasoning”; if this signal cannot be read, it reverts to continuous breathing.
* Accessibility: declared as role="status", intended for screen readers.
Fine-Tuning Details¶
- Geometry: consistently uses 2px or 4px right angles, with no in-between values.
- Shadows: uses a 0.5px inner highlight and a soft shadow.
- Excluded effects: explicitly no radial gradients, glow,
backdrop-filter, or blend modes.
Plugin Card Settings Panel¶
In the sidebar Plugins menu, click the installed dsh-trae-skin card; a dedicated settings page expands below. It contains 10 appearance settings, grouped into Appearance and Breathing Light. After making changes and clicking save, the page redraws immediately. The settings panel supports Restore Defaults and validates invalid values before saving.
Installation and Enablement¶
Install¶
Install the plugin using the DSH command line:
dsh plugin --profile web add https://github.com/RonnyJung2021/dsh-trae-skin
Or do it in the Web GUI: sidebar Plugins → Add plugin → enter dsh-trae-skin → Install → Enable now.
Enable and Configure¶
- After installation and enablement, find
dsh-trae-skinin sidebar Plugins → Installed. - Click the settings page under the card.
- Adjust the color scheme, wordmark content, or breathing-light parameters.
- Click Save; the interface updates immediately.
Configuration Items¶
Configuration is written to profiles/web/cordis.patch.yml and includes the following main items:
| Setting | Type | Default | Description |
|---|---|---|---|
scheme |
dark | light | auto |
dark |
Shell color scheme |
accent |
#rgb / #rrggbb |
#32f08c |
Accent color; drives the full color system |
wordmark |
string (1-24 chars) | DEEPSEEK HARNESS |
Top status strip text |
strip |
boolean | true |
Whether to display the top status strip |
stripBare |
boolean | false |
Whether the strip shows text only (no background) |
pulse |
boolean | true |
Whether to enable breathing during reasoning |
pulseColor |
follow / #rrggbb |
follow |
Glow diffusion color mode |
pulseScale |
number (1.2-2.4) | 1.6 |
Glow diffusion scale multiplier |
pulsePeriodMs |
number (800-4000) | 1600 |
Breathing period (milliseconds) |
pulseOpacity |
number (0.1-0.6) | 0.35 |
Glow intensity |
Uninstall¶
To remove the plugin, run the following command:
dsh plugin --profile web remove dsh-trae-skin
Or click uninstall in the Web GUI plugin card. After uninstallation, the stylesheet, status strip, breathing-light effects, and related configuration file entries are removed together, and the interface returns to its product-default state.
Notes¶
- Host-side loading: host-side styles are loaded only once when the engine starts. After upgrading the plugin or modifying
cordis.patch.yml, you must restart the DSH engine for changes to take effect; refreshing the page is not enough. - No extra resources: the plugin contains no font files or image resources. All icons and fonts rely on the host system or DSH built-in resources.
- Environment requirement: DSH version
0.1.5-rc.2or later is required.
Summary¶
dsh-trae-skin is a lightweight, pure-style DSH appearance plugin. It drives the entire visual system through a single accent color, provides Dark/Light/Follow Product modes, and includes a top status strip with a breathing effect. For developers who want to unify the DSH interface with a specific design style (such as referencing trae.cn), it is a practical solution without needing to refactor code.
