Introduction¶

The native interface of DSH features a neat grayscale color scheme; it is functionally sufficient, but staring at it for long periods of coding or running sessions can make the interface feel like “it doesn’t have its own workspace.” If you want a more specific visual atmosphere but don’t want to change any interaction logic, the plugin introduced below offers a low-cost path.

DIY skin methods usually involve writing your own CSS to override host styles. The problem is that dark/light mode switching, WebGL backgrounds, and syncing with the host’s native theme switcher need to be implemented separately, and resource release must be handled after changes. dsh-official-skin turns this into a standard DSH plugin: it gives the Web interface a two-layer “official website texture.” The dark mode features a deep blue cosmic feel (fluid aurora + particle whale + constellation grid), and the light mode is the blue gradient from the official homepage hero plus glass panels, automatically switching with DSH’s own appearance settings.

It is a non-official community plugin, maintained by Klein (GitHub account kleinklein0824), current version 1.1.6, license MIT.

What is it¶

One sentence: A DSH skin plugin that only changes visuals, not behavior.

• Maintainer: Klein (kleinklein0824)
• Category: Fun Cosplay / Skins
• Current Version: 1.1.6 (Consistent between README and package.json)
• License: MIT © 2026 Klein
• Platform: DSH Web and DSH Desktop; the package declares dsh.client.platform = "web", and the desktop version loads the same client implementation via the embedded Web interface.
• Rendering: WebGL2 (Aurora and Whale); automatically falls back to pure CSS background if unavailable.
• Attribution: Non-official community plugin, no affiliation or endorsement relationship with DeepSeek Official; DeepSeek name, whale graphics, and related brand assets belong to their respective rights holders and are not within the scope of the MIT license; see repository NOTICE.md for details.

It solves specific pain points: The native DSH color scheme is too flat and lacks depth. When writing custom CSS overrides, you have to manually maintain dark/light mode switching and theme synchronization, and it is easy to forget to release WebGL contexts. This plugin incorporates all of this into a standard plugin structure.

Core Features¶

Dark Theme: Deep Blue Cosmic Feel¶

The dark mode consists of four overlaid layers:

• Base Color: radial-gradient(165% 115% at 50% -8%, #14385c 0%, #102a45 22%, #0b1a2b 45%, #080f18 70%, #06080c 100%). Deep blue in the upper middle and nearly black at the bottom, creating depth across the screen.
• Fluid Aurora: WebGL flowmap, drawing inspiration from the fluid effects on the deepseek.com homepage, re-implemented and darkened for this project to adapt to DSH’s layers. Compressed to brightness(0.36) using screen blend mode, leaving only a layer of slowly flowing cold blue / amber light.
• Particle Whale: A GLSL particle-based DeepSeek whale logo, with white glowing dots and mouse parallax response.
• Constellation Grid: Cold white dots with thin connecting lines (rgba(190,214,255), line 0.16 / point 0.26), resembling a very faint star map.

Light Theme: Official Hero + Glassmorphism¶

• Base Color: linear-gradient(180deg, #9cc1e7 0%, rgba(250,250,250,0) 100%), #f9f8f8, the same blue hero as the official homepage.
• Particle Whale: White particles with normal blend mode, not obscuring text.
• Glassmorphism: Sidebar, input card, message bubbles, and code blocks uniformly use backdrop-filter: blur() saturate() with inner highlight borders to create the thickness of “a layer of glass” rather than a clump of semi-transparent gray.

Common Guarantees¶

• No interference with functional panels: Dialogs, menus, lists, and modals ([role=dialog|menu|listbox], [aria-modal]) remain native and opaque, and will not be “pierced” by the background into transparency.
• Smooth switching: The two background layers cross-fade in 300ms, and the WebGL loop is paused for 360ms at the moment of switching to avoid competing with the main thread for compositing.
• No resource leaks: WEBGL_lose_context.loseContext() is called on every reload to release the old context, stop the old RAF (Request Animation Frame), and remove the old DOM elements.
• No interaction changes: The plugin only operates on the background layer and panel visuals; it does not modify any interaction logic for dialogs, menus, or lists.

Installation and Enablement¶

Environment Requirements¶

Host versions below 0.2.1-rc.5 or entering 0.3.x are out of scope. The compatible range is also written in the engines.dsh field of package.json.

Method 1: DSH Desktop (Recommended)¶

Open DSH Desktop, go to Plugins → Add Plugin, and enter the version number:

dsh-official-skin@1.1.6

After confirming installation, follow the prompts to enable the plugin and completely exit and reopen DSH Desktop. Installation, enablement, and restart on the desktop are managed by the application.

If the npm installation for the current desktop version is unavailable, you can also use the GitHub target:

github:kleinklein0824/dsh-official-skin

Method 2: Direct Installation for DSH Web¶

Execute in terminal:

dsh plugin --profile web add "dsh-official-skin@1.1.6"

After installation, refresh DSH Web or re-execute dsh web.

Method 3: Installation via dsh-market Plugin Marketplace¶

First install and enable dsh-market (npm package name dshmarket):

dsh plugin --profile web add "dshmarket@latest"

Then open Plugin Market → Discover or Themes, search for dsh-official-skin, and install or update it. Reload according to the host prompts.

Two notes:

• dsh-market has linked this repository to the npm package dsh-official-skin, so it will prioritize installation from npm; pushing to GitHub alone will not update the npm package installed by users on the market.
• You can also continue to use the independent DSH skin market plugin dsh-skin-market. They are different plugins; refer to their respective entries for installation source and update methods.

Local Debugging (For Development Only)¶

cd ~/.dsh/profiles/web
pnpm add link:"<absolute path to this repository>"

Then add the package name to the profile’s package.json:

{
  "dsh": {
    "profile": {
      "bundles": ["...", "dsh-official-skin"]
    }
  }
}

Restart DSH to apply changes.

Uninstall¶

dsh plugin --profile web remove "dsh-official-skin"

Typical Usage: Switching based on DSH Appearance Settings¶

This skin does not implement its own theme judgment; it follows DSH’s own theme switcher. The typical flow is:

1. Open Settings → General Settings → Appearance, and select “Dark / Light / Follow System”.
2. DSH writes the selection to <body data-ds-dark-theme>.
3. The plugin uses MutationObserver with a 2.5s fallback monitoring to listen for this attribute and switch the background layer, whale, aurora, and glass to the corresponding set.

The mapping is as follows:

The button in the top-right corner is a shortcut for the same thing: it calls the DSH theme service setTheme("dark" | "light"), equivalent to clicking once in settings. Therefore, after the button switches, the “Appearance” option in the settings page will also change—both share the same state, and there are no two separate sets of switches.

If you see “Reconnecting…” at the bottom of DSH, the client cannot access the theme service at this time, and clicking the button will not take effect immediately (this is a host disconnection, not a broken button). It will be automatically applied after reconnection is complete.

Source Code Structure and Tuning¶

The plugin follows the standard DSH structure: dsh.bundle.patch in package.json tells the host to inject cordis.patch.yml into the cordis tree, and dsh.client.platform = "web" allows lib/client.js to be picked up by dsh-client-modules and compiled into window.__DSH_BOOT__, being injected once when the page loads. The skin itself is lib/client.js, and lib/index.js only performs host-side static auditing without throwing errors.

Background layering:

#dsh-ds-bg  (position:fixed; inset:0; z-index:-1)
├─ #dsh-ds-bg-light        Blue hero gradient       ← opacity toggled by .dsh-ds-dark
├─ #dsh-ds-bg-dark         Deep blue radial gradient ← opacity toggled by .dsh-ds-dark
├─ #dsh-ds-aurora          WebGL fluid aurora (canvas)
├─ #dsh-ds-constellation   Constellation grid (canvas)
└─ #dsh-ds-whale           Particle whale (canvas, screen blend)

Theme switching only changes the opacity of two layers and the visibility of three canvases, without rebuilding the DOM or recompiling shaders.

You don’t need to read the entire code to change visuals; the parameters are concentrated in lib/client.js:

The following is the default value reference provided in the README; verify the current version’s client.js before changing.

After modifying lib/client.js, you must restart the DSH application (close and reopen): client code is injected at page load, and pressing Ctrl+R / F5 on the desktop will not re-import (as noted in the README, this is ineffective in testing), and set_plugin start/stop also does not trigger a re-import.

Compatibility and Notes¶

Verified Range¶

• Declared Range: DSH Web / Desktop ^0.2.1-rc.5 || ^0.2.2-rc.1. 0.2.1-rc.5 has been verified on real machines; Desktop uses the same embedded Web client.
• 0.2.2-rc.1: Host compatibility checks, module loader, theme service, theme attributes, and button slots have been verified; loading, dark/light switching, and repeated loading have been checked in the Chromium fixtures. This is not equivalent to a full DSH Web / Desktop scenario regression; you should still check session switching, input boxes, and other plugin panels after upgrading.
• Specific evidence can be found in the repository docs/compatibility.md.

WebGL2 Fallback¶

The aurora and whale depend on WebGL2; they automatically fall back to a pure CSS background if WebGL2 is unavailable, and the interface remains usable.

Host Upgrade Risks¶

Theme judgment and primary positioning prioritize attributes like [data-ds-dark-theme] and [data-slot]; some visual patches still use the host’s hash class names, so you still need to check the actual display effect after upgrading the host.

Common Issues¶

• Button in top-right corner has no response: When “Reconnecting…” appears at the bottom, the client cannot access the theme service, and clicks are silently dropped; wait for the connection to recover before clicking again.
• Interface didn’t change after editing client.js: The client bundle is injected at page load; you must reload the page or restart the application.
• Console reports Too many active WebGL contexts: Chromium has a limit on the number of concurrent WebGL contexts. This plugin actively releases old contexts on reload; if it still appears, it is usually because another plugin is also opening GL contexts.

Performance and Stability¶

• Prioritize the first frame display when switching sessions and workspaces to avoid opaque backgrounds briefly covering the background.
• Deep interface scanning is executed in frames to avoid obvious stuttering during chat streaming output.
• Background animation pauses when popups are opened and automatically resumes when closed.
• Glass blur for the input box is moved to a separate layer to stop the continuous flickering when the mouse hovers over the send button.
• Old instances are cleaned up when the plugin reloads to avoid animation stacking and resource leaks.

Suitable Scenarios and Notes¶

Suitable for:

• Developers who work long-term in DSH Web / Desktop and want to replace the default gray/white interface with a layered, atmospheric visual without changing interactions.
• People who want the skin to follow DSH’s native appearance switches (including “Follow System”) rather than maintaining a set of independent theme logic themselves.
• People who want to see a clearly structured implementation of a skin source code to learn the dsh.bundle.patch + dsh-client-modules injection method.

Notes:

• Permissions and Source: The plugin runs with the permissions of the current dsh process; it is a community third-party project. You should read the source code before installation (focus on lib/client.js and lib/index.js), confirm the license is MIT, and check its actual impact on the page DOM.
• Compatibility: Use only within the declared host version range; verification for 0.2.2-rc.1 was at the fixture level. After upgrading the host, please perform your own regression testing for session switching, input boxes, and other plugin panels.
• Resource Usage: Aurora, whale, and constellation are WebGL2 rendered. Be aware of video memory on low-end devices or when multiple plugins open GL contexts simultaneously. If necessary, lower the aurora intensity or disable certain layers in lib/client.js.
• Non-official Status: This is a non-official community plugin with no official affiliation with DeepSeek / Synthflow; the community directory site is also not an official app store.

Conclusion¶

The value of this plugin lies in making the “official website texture skin” a standard DSH plugin: visuals are divided into a background layer and a glass panel layer; theme switching only changes opacity and canvas visibility state, and follows DSH’s native appearance switcher, avoiding common dark/light synchronization and resource leak issues associated with writing custom CSS overrides.

Related links:

• Community directory page: https://www.skillhub.cn/plugins/kleinklein0824/dsh-official-skin
• GitHub repository: https://github.com/kleinklein0824/dsh-official-skin