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-motion and automatically falls back to static rendering.
  • When Changes Take Effect: After modifying CSS or source code, you must run node scripts/build.mjs again, because DSH loads the build artifacts in lib/.
  • 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.