Preface

In the daily use of DSH, both WebUI and DSH Desktop offer the same default interface. If you wish to customize the colors of the chat area, settings panel, input box, or code blocks, or add features like wallpapers, video backgrounds, frosted glass, and background overlays, such appearance adjustments are typically achieved through plugins.

dsh-ui-appearance is a DeepSeek Harness appearance customization plugin maintained by TQSY114514. It provides theme color palettes, wallpaper/video backgrounds, frosted glass and background ambiance settings. All modifications are previewed in real time and automatically persisted; it works with both WebUI and DSH Desktop.

Core Features

Theme Colors

dsh-ui-appearance provides 6 color roles:

  • Primary color
  • Background color
  • Panel color
  • Input box color
  • Text color
  • Border color

Each role supports a color picker and HEX input. After applying a preset, you can still fine-tune these color roles individually.

Wallpaper Background

The wallpaper background supports the following loading methods:

  1. Upload an image.
  2. Drag and drop an image.
  3. Paste an image URL for one-click loading.

Supported image formats include JPG / PNG / WebP / GIF. The original quality of the wallpaper is stored in IndexedDB, without occupying the localStorage quota.

Images have a foolproof upper limit of 200MB. Images exceeding 4096px in width or height will be proportionally scaled down and re-encoded as WebP; GIFs within the limit retain their animation.

Video Background

The video background supports MP4 / WebM, plays muted in a loop, and is mutually exclusive with image backgrounds.

The video limit is 50MB. It is recommended to use H.264 MP4 or VP8/VP9 WebM. Unsupported codecs will automatically fall back to the wallpaper.

Frosted Glass and Transparency

dsh-ui-appearance provides the following interface transparency controls:

  • Panel opacity
  • Frosted glass intensity
  • Input box opacity
  • Code block opacity

The input box and code blocks can have their opacity adjusted independently. The panel, input box, and code block can all exhibit a semi-transparent effect along with the wallpaper background.

Background Ambiance

The background ambiance provides three independent sliders:

  • Background opacity
  • Background blur
  • Background overlay

Background opacity controls the intensity of the wallpaper, background blur makes the wallpaper visually recede into the distance, and the background overlay adds a layer on top of the wallpaper to aid reading.

Presets and Color Scheme Sharing

dsh-ui-appearance comes with 6 built-in presets:

  • Default
  • Midnight
  • Ocean
  • Forest
  • Rose
  • Monochrome

Presets can be applied with one click. After application, you can still fine-tune the settings without being locked into the preset.

Color scheme sharing is also done via JSON text:

  1. Click “Export Color Scheme” in the “Color Scheme” section at the bottom of the settings panel.
  2. Copy the JSON text.
  3. Paste it into the “Import” section on another browser or device.
  4. Click “Import” to apply the color scheme.

Real-time Preview and Persistence

All modifications take effect in real time without the need to refresh or manually save.

Settings are saved in the browser’s localStorage. The original quality of wallpapers and videos is stored in IndexedDB, and persistent storage is requested from the browser to reduce the chance of being cleared.

This plugin supports both WebUI and DSH Desktop. After uninstalling, the interface reverts to its default state.

Installation and Activation

First, confirm the target profile. The default profile for DSH Desktop is desktop, while the web version typically uses web. The plugin needs to be installed into the currently running or active profile.

Use the npm installation command:

dsh plugin --profile <name> add dsh-ui-appearance

Where <name> is the name of the currently used DSH profile.

If installing from source, first clone the repository:

git clone https://github.com/TQSY114514/dsh-ui-appearance.git

Assuming the plugin is installed into the current profile, execute:

pnpm prepare

This will generate the lib/ output. Then restart the DSH service, for example:

dsh web

The declared runtime environment in the project documentation is:

Node >=18
pnpm@10.34.5

Typical Usage

  1. Open WebUI, navigate to the sidebar “Settings” → “General”.
  2. Below the “Appearance” row, find “Personalize Appearance” and click to expand.
  3. Click a preset for a quick theme change.
  4. Use the color picker or HEX input to fine-tune the 6 color roles.
  5. Upload or drag in a wallpaper/video, or paste an image/video URL for one-click loading.
  6. Drag the background ambiance and interface sliders to adjust opacity, blur, overlay, frosted glass, and other effects.
  7. If you need to restore this appearance on another browser or device, click “Export Color Scheme” in the “Color Scheme” section at the bottom of the settings panel, copy the JSON text, then paste it at the target location and click “Import”.
  8. DSH Desktop users need to install the plugin into the actually active Desktop profile, which has the default profile name desktop.

Use Cases and Considerations

This is suitable for users who plan to use DSH long-term in WebUI or DSH Desktop and want to adjust the interface colors, background, frosted glass, and overlay effects.

Please note the following before use:

  • Settings follow the browser. Changing browsers or clearing site data will result in loss of settings.
  • The original quality of wallpapers and videos is stored in IndexedDB.
  • Images have a foolproof upper limit of 200MB; images exceeding 4096px will be proportionally scaled down and re-encoded as WebP; GIFs within the limit retain their animation.
  • Video limit is 50MB; it is recommended to use H.264 MP4 or VP8/VP9 WebM; unsupported codecs will automatically fall back to the wallpaper.
  • Network URLs may fail to load due to anti-hotlinking or missing CORS headers.
  • The syntax highlighting text color in code blocks is part of the language-specific color scheme and does not change with the primary color.
  • Chat bubbles follow the primary color; there is no independent bubble color setting. If the primary color is not set, the default light blue-white is maintained.
  • There may be visual conflicts with third-party plugins; since v0.1.5, the wallpaper layer is set to z-index: -1 to reduce layer occlusion.
  • DSH plugins are loaded and run by the current DSH process. Before installation, please check the source code, dependencies, and license. This plugin is licensed under MIT.

Conclusion

dsh-ui-appearance consolidates the appearance adjustments for DeepSeek Harness into the settings panel: theme colors, wallpapers, video backgrounds, frosted glass, background ambiance, and color scheme sharing can all be adjusted directly within the interface. Modifications take effect in real time and are automatically saved.

GitHub Repository:

https://github.com/TQSY114514/dsh-ui-appearance

The DSH community directory is an independent site and has no official affiliation with DeepSeek or幻方 (High-Flyer). The provided materials have not included a verifiable directory page URL. Please refer to the actual site for the directory page.