In the WebUI use scenario of DeepSeek Harness (DSH), in addition to model interaction, developers often need to customize the interface style. Traditional theme changes may require overriding a large amount of code. This article introduces a pure presentation-layer plugin. Without changing the underlying service logic, it provides a “Koi Pond” visual experience for DSH WebUI through Canvas animation and fine-grained CSS component splitting.
Plugin Introduction¶
This is a DSH WebUI theme plugin named dsh-skin-koi-pond, maintained by Kogisune and licensed under the MIT License. It uses Canvas animation and a 7-part CSS splitting structure to provide a “Koi Pond” visual impression for the WebUI, supporting both light and dark themes.
Core Features¶
The plugin mainly provides the following capabilities:
- Koi Pond Animation: Implements koi flocking, alignment, and separation behaviors based on Canvas 2D, and supports mouse repulsion. When the page is hidden, the animation automatically pauses.
- Light and Dark Themes: Provides two themes: “Pond Night” (dark) and “Paper Day” (light).
- Visual Mask: The background uses a 15% white mask with 3px blur to soften the animation and highlight the foreground UI.
- Component-Split CSS: Uses a 7-part split structure (background / sidebar / titlebar / composer / overlay / fonts / ui) to override DSH official design tokens.
- Accent Colors: Provides auxiliary color palettes such as gold scales, lotus leaves, and water-light blue.
- Pure Presentation Layer: Does not inject services, does not emit Cordis events, does not touch model requests, and only overrides design tokens.
Installation and Enablement¶
Install it as a DSH plugin and run the following command:
dsh plugin --profile web add github:Kogisune/dsh-skin-koi-pond
After installation, restart the DSH Web service for the configuration to take effect.
Usage¶
Switch Colors in Real Time¶
In the DSH WebUI browser console, call the __koiSetScheme interface to switch the koi color scheme in real time. This operation does not rebuild the koi flock:
__koiSetScheme('ogon')
Build the Theme¶
If you need to modify CSS or source code, run the build command:
node scripts/build.mjs
Notes¶
- Dependency: Depends on
@deepseek-ai/cordis(^4.0.1). - Accessibility: Supports
prefers-reduced-motionand automatically falls back to static rendering. - When Changes Take Effect: After modifying CSS or source code, you must run
node scripts/build.mjsagain, because DSH loads the build artifacts inlib/. - Permission Scope: As a pure presentation layer, it does not interfere with model requests or Cordis events.
For more details, visit the GitHub repository or the Community Directory.
