Introduction

DeepSeek Harness (DSH) adopts an “everything is a plugin” architecture. In the Web Profile environment, developers can extend the interface through browser-side plugins. vlantech/dsh-glassic-mist-theme is a pure client-side theme plugin designed to overlay a mist-blue mask and dynamic cloud layers on the default skin, and to give popups a frosted-glass texture.

Core Features

The plugin uses the default day skin as its base, is registered as the mist-blue theme, and implements the following features through CSS layering:

  1. Mist-blue mask and clouds: Overlays a near-white mist-blue background and soft white light spots at the bottom layer of the page, and generates multiple radial-gradient white cloud layers that drift slowly using translate3d and scale (74s cycle). When the system enables prefers-reduced-motion, the animation is automatically disabled.
  2. Frosted glass for all popups: Applies backdrop-filter blur effects to components such as input fields, context panels, Modal, HoverCard, Toast, and Tooltip, with tiered intensities of input field 20px / context panel 24px / Modal 28px.
  3. Settings persistence: Toggle in Settings → General → “Mist-blue Theme”; state is written to localStorage (key dsh-mistblue.enabled) and automatically restored after refresh.
  4. Intensity adjustment: A 10%–100% slider is provided inline in settings to adjust the mask and cloud intensity in real time; the default is 50%, and 100% doubles saturation. The state key is dsh-mistblue.intensity.v2.
  5. Shortcut command: Enter /misttheme to quickly toggle the theme.
  6. Zero intrusion: All custom CSS is scoped under the body[style*='--dsh-mistblue'] selector, leaving no residue after disabling.

Installation and Enablement

Installation

The plugin must be mounted under the Web Profile’s node_modules.

  1. Create the directory and copy files:
    mkdir -p ~/.dsh/profiles/web/node_modules/dsh-mistblue
    cp -R <本仓库目录>/. ~/.dsh/profiles/web/node_modules/dsh-mistblue/
  1. Register the bundle and dependency in the Profile’s package.json:
    {
      "dsh": {
        "profile": {
          "bundles": ["...", "dsh-mistblue"]
        }
      },
      "dependencies": {
        "dsh-mistblue": "file:./node_modules/dsh-mistblue"
      }
    }
  1. Run the build:
    npm run build
  1. Restart Harness.

Enablement

  • Settings panel: Settings → General → “Mist-blue Theme” → “Enable Mist-blue”.
  • Shortcut command: Type /misttheme in the input field and select “Enable Mist-blue Theme / Disable Mist-blue Theme”.
  • Adjust intensity: Drag the “Mist-blue Intensity” slider inline in settings (10%–100%).

Design and Implementation

The plugin achieves flexible control through scope isolation and token overrides.

  • Scope isolation: All custom CSS uses body[style*='--dsh-mistblue'] as the prefix. When the theme is activated, the framework writes this style marker to the body, and the CSS takes effect; after disabling, the selector no longer matches, so the default theme is unaffected.
  • Performance optimization: The cloud animation uses will-change: transform, opacity and compositor layers to avoid reflow. The animation cycle is restrained (74s), and the drift amplitude is small.
  • Frosted-glass tiering: Different layers apply different blur intensities and saturations (e.g., Modal uses blur(28px) saturate(1.3)).
  • Safari compatibility: Safari approval cards/issue cards use a nearly opaque background (rgba(248, 251, 254, 0.97)). This is intentional to prevent abnormal content clipping.

Typical Usage

  • Settings → General → “Mist-blue Theme” → “Enable Mist-blue”.
  • Type /misttheme in the input field → select “Enable Mist-blue Theme / Disable Mist-blue Theme”.
  • Drag the “Mist-blue Intensity” slider (10%–100%).

Applicable Scenarios and Notes

  • Target platform: DeepSeek Harness Web interface (browser-side plugin).
  • Theme adaptation: The theme is registered as the light-mode mist-blue theme. Users with dark system settings are advised to use it under a light theme.
  • Dependency mechanism: Depends on Harness’s dsh.client client manifest mechanism.
  • Safari limitation: Safari approval cards/issue cards use a nearly opaque background and are not fully transparent.

Conclusion

By overlaying a mask, cloud animation effects, and frosted-glass texture, this plugin provides a lightweight visual enhancement solution for the DSH Web interface without replacing the default skin. The source code and configuration are available on GitHub.