DSH (DeepSeek Harness) has a relatively minimal default interface style. If you want to replace the interface background with a custom image or gradient during development or demos to create a more immersive visual experience, you can use dsh-plugin-background-image. The plugin is maintained by Voyage-He and is open-sourced under the MIT License.

Plugin Overview

This plugin allows you to set Web images, local images, or preset gradients as the background of the DSH interface. In addition to basic image switching, it also provides fine-grained controls such as image opacity, display scope, frosted-glass blur, zone-specific opacity, and chat content offset.

Installation

Use the official installation command to add it. Replace <profile> with the name of the DSH profile you are using.

npx @deepseek-ai/dsh plugin --profile <profile> add dsh-plugin-background-image

After installation, start DSH with the same profile, and the plugin will be loaded automatically.

Core Features

1. Resource Support

The plugin supports three types of image resources:
* Web images: Supports http:// or https:// links.
* Local images: Uses absolute paths (for example, /Users/name/Picture.png).
* Data URLs: Directly embedded Base64 data.

2. Local Image Invalid Detection

The plugin automatically detects local image paths when the page loads and when the settings page is opened. If a file has been moved or deleted, the interface will prompt you to select an image again. Local file paths are only recorded and will not be copied or moved.

3. Gradient Presets

A set of preset gradient color palettes is provided, including Aurora, Sky, Sakura, Sunset, Mint, and Ocean, making it easy to switch styles quickly.

4. Display Scope and Immersive Mode

You can choose the display scope of the background:
* Immersive fullscreen: The background covers the entire page.
* Conversation area only: The background is displayed only in the area containing the conversation list and the composer box.

5. Frosted-Glass Effect and Saturation

  • Sidebar and cards: The sidebar and composer card support frosted-glass blur and color saturation adjustment.
  • Independent conversation area control: The conversation area has independent blur intensity (0–48 px) and opacity (0–100%) settings. By default, it is transparent and has no blur, preserving the original settings.

6. Zone-Specific Opacity

The opacity of the sidebar, conversation area, and composer can be adjusted separately. Note that the sidebar opacity setting is only effective in immersive fullscreen mode.

7. Chat Content Offset

By shifting the chat content horizontally (message list + composer box, supporting ±320px), you can better display details of the background image without changing the column width.

Configuration and Persistence

All settings are automatically saved to the settings.yaml file and restored automatically after refreshing the page or restarting DSH.

Configuration Example

The plugin generates a background-image node in the configuration file. The following is an example of the configuration structure:

background-image:
  enabled: true
  mode: fullscreen
  opacity: 0.9
  image: https://example.com/background.webp
  blur: 12             # 毛玻璃模糊强度（侧边栏和卡片），0 为关闭
  conversationBlur: 0 # 对话区域独立模糊（0-48 px）
  conversationOpacity: 0 # 对话区域独立不透明度（0-1）
  saturation: 1.4      # 毛玻璃颜色饱和度
  sidebarOpacity: 0.5  # 侧边栏不透明度（全屏模式）
  composerOpacity: 0.72 # 撰写器不透明度
  contentOffset: 120   # 内容水平偏移（px），正数为右，负数为左

Local Image Loading Mechanism

Due to browser security policies, file:// resources cannot be loaded directly. The plugin registers a read-only file service route in the host (GET /plugins/background-image/file?path=<absolute_path>), and returns local images to the page through same-origin HTTP requests. This route only accepts loopback addresses and only serves paths referenced in the current configuration.

Known Limitations and Considerations

  1. Global background token override: The plugin overrides the global DSH background token --dsw-alias-bg-base. Although the plugin forcibly sets known panels/buttons to the surface color, elements newly added in future DSH updates that reference this token may require further adjustments.
  2. Dependency on internal class names: The frosted-glass effect and content offset depend on DSH internal hashed class names (such as .pI_x6G_frame). If a DSH version update changes the class names, the related effects may become ineffective or misaligned.
  3. Sidebar frosted-glass implementation: The sidebar frosted-glass effect is implemented through a pseudo-element (.pI_x6G_sidebarCol::before) rather than being applied directly to the sidebar container. This implementation avoids potential rendering issues caused by backdrop-filter when the container includes position: fixed child elements.

Summary

dsh-plugin-background-image provides DSH with complete capabilities ranging from basic image switching to refined UI customization. For users who need to customize the interface style, conduct demos, or enhance immersion, this is a practical tool.

  • GitHub repository: https://github.com/Voyage-He/dsh-background-image
  • Plugin directory: https://www.skillhub.cn/plugins/Voyage-He/dsh-background-image