Preface¶

Changing themes for Web interfaces is often done by modifying build artifacts or writing override styles for individual component class names. The former gets wiped out during upgrades, while the latter breaks when the version changes. DSH’s philosophy is “everything is a plugin”; the theme can be handled by a plugin just like any other.

The dsh-krill-theme introduced below is a pure client-side CSS theme plugin: it simultaneously covers both the dark and light appearances of DSH Web. Dark mode corresponds to the deep sea world, light mode to the shallow sea world, plus a layer of plankton animation background. No changes to dist, no touching component logic.

What is it¶

dsh-krill-theme is maintained by i1j, under the MIT license, current version v1.0.0 (2026-08-15). It is positioned as a “Plankton Theme”: Dark mode is the deep sea, encoding information importance via light brightness (the brighter, the more important); Light mode is the shallow sea, encoding via clarity (the clearer, the more important). Besides colors, it includes a plankton animation background for the conversation bar, an enhanced “Deep diving…” state during generation, and a jellyfish-shaped parameter entry.

Core Features¶

Dual Mode in One¶

Dark and light styles are written in the same stylesheet. The selectors are mutually exclusive and automatically switch by following the system appearance settings, requiring no manual theme switching.

Token-Level Zero-Intrusion Override¶

DSH Web components uniformly read tokens. The plugin only redefines about 95+ token declarations on the body (--dsw-alias-* / --dsw-specific-* / --shiki-*), taking effect site-wide: sidebar, conversation bar, dock, overlays, menus, and settings all follow. Because dist isn’t modified and specific component class names aren’t relied upon, upgrades only require checking token key names and 3 component hash class names (wSkVaW_root / Sxvs8a_body / hHd-Xa_root, from @deepseek-ai/dsh-client-ui-conversation dist).

Plankton Animation Background¶

The conversation bar background is a canvas-drawn plankton animation: a pre-rendered glowing sprite with no dependencies. Particles are driven by ocean currents—drifting in the same direction en masse, with periodic changes in direction and flow speed, while individuals only have tiny swimming perturbations. It is quiet and non-intrusive to reading. When the system’s prefers-reduced-motion is enabled, it automatically degrades to static frames.

Deep Dive State Enhancement¶

During generation, all particles surge nearly vertically at about 40x speed, overlaid with periodic swells of a ~3.1s breathing rhythm. Extra smaller, brighter light dots surge out; overall brightness ×1.15; a vertical gradient glow pulse (dark at bottom, white at top) is overlaid on the conversation bar. In terms of performance, pre-rendered gradients are only rebuilt on resize, adding just 1 drawImage call per frame.

Jellyfish Parameter Entry¶

There is a jellyfish button in the top-right of the conversation bar. Clicking it pops up a parameter panel: particle count, opacity, speed, direction, swing, tidal pulse, deep dive multiplier, etc. All are adjustable and take effect in real-time without restarting.

Consistent Details Site-Wide¶

Sidebar text noise reduction; status colors unified by the deep sea palette (Success Fluorescent Green / Warning Deep Sea Amber / Error Coral Red); send button pulses in deep sea style; code highlighting dual-mode adaptation (Dark mode Shiki Fluorescent series / Light mode White background readable series); markdown color segments work in both modes.

Installation & Enablement¶

First, perform community installation. Execute in the profile directory (e.g., ~/.dsh/profiles/web):

dsh plugin --profile web add git+https://github.com/i1j/dsh-krill-theme.git

For domestic users, you can use the Gitee mirror for faster speeds:

dsh plugin --profile web add git+https://gitee.com/elite1j/dsh-krill-theme.git

Then add dsh-krill-theme to the profile’s dsh.profile.bundles. After the steps above, restart dsh web and the theme takes effect.

If not installing via git, you can manually declare it in <profile>/package.json under dependencies:

{
  "dependencies": {
    "dsh-krill-theme": "link:/path/to/dsh-krill-theme"
  }
}

Also add "dsh-krill-theme" to the dsh.profile.bundles array, then run pnpm install in the profile directory, and restart dsh web.

The repository is tagged with the GitHub dsh-plugin theme tag and can be found via community plugin search (find_dsh_plugin / dsh-recommend list).

If you need to build it yourself, first install dependencies, run type checking, then bundle:

pnpm install
pnpm typecheck
pnpm bundle                    # tsdown → lib/index.js + lib/client.js
npx tsc -p tsconfig.build.json # 生成类型

Usage & Tuning¶

The plankton animation supports three tuning methods.

The first, configuring before loading (e.g., via injected script or bookmarklet), is suitable for fixing default parameters:

window.__DSH_DEEPSEA_PLANKTON__ = { speed: 0.0004, count: 70 }

Turning off the animation is also done by setting before loading:

window.__DSH_DEEPSEA_PLANKTON__ = false

The second, real-time tuning after loading, no restart needed:

window.__DSH_DEEPSEA__.setPlankton({ speed: 0.001, baseAngle: -1.2 })
window.__DSH_DEEPSEA__.getPlankton()

The third, overriding CSS variables in your own stylesheet:

:root { --dsh-plankton-speed: 0.0004; --dsh-plankton-angle: -1.2; }

Adjustable parameters and default values (excerpt): count=90 (--dsh-plankton-count), opacity=0.32 (--dsh-plankton-opacity), speed=0.0007 (--dsh-plankton-speed), baseAngle=-1.28 (--dsh-plankton-angle), swing=0.18, swingPeriod=55, flowPulse=0.45, flowPulsePeriod=42, diveCountScale=1.6, diveBrightness=1.15, diveGlow=0.22 (0 means off). If you don’t want to write code, just use the parameter panel on the jellyfish button.

Scenarios & Notes¶

Suitable for:

Wanting a theme that simultaneously covers dark/light and is upgrade-resistant;
Hoping for a bit of atmosphere in the interface without interfering with reading—the animation has low opacity and supports degradation;
If you only need a pure dark theme, simply comment out the shallow sea section at the end of the style file.

A few notes:

Scope: This plugin only handles themes and colors. Layout changes (1360px wide conversation bar, user bubble alignment, hiding tool-call nodes, hiding reasoning, wide.dock dual column) are handled by the dsh-wide-dock plugin; the two can be used together.
Light Mode: In light mode, particles still use the deep sea fluorescent palette; there is no theme switching for particles; light mode defaults to shallow sea.
Accessibility: When prefers-reduced-motion is enabled, both plankton animation and deep dive animation degrade to static frames.
Mechanism: Styles are injected into document.head (idempotent style guard) during bundle evaluation, loaded later than the dist token stylesheet, and overwrite earlier writes in case of same specificity.
Security: The plugin runs with the permissions of the current dsh process; please check the source code and license yourself before installing (this project is MIT).

Conclusion¶

The value of dsh-krill-theme lies in turning “changing themes” from modifying dist to installing a plugin: one stylesheet manages two appearances; token-level coverage reduces upgrade costs to just a few key names and class names; animations and parameter entry are optional add-ons.

Directory Page (Independent community directory, no official affiliation with DeepSeek / Huafan): https://www.skillhub.cn/plugins/i1j/dsh-krill-theme
GitHub: https://github.com/i1j/dsh-krill-theme

dsh-krill-theme: DSH Web Deep Sea/Shallow Sea Dual Mode Theme Plugin