Introduction

DeepSeek Harness (DSH) adopts a plugin-based architecture, allowing developers to customize the interface by extending features. When the default Web interface style does not meet specific requirements, directly injecting custom CSS is the most straightforward solution. This plugin adds a new row in the settings panel, providing a switch control and a real-time editing area, and injects CSS into the Web interface.

Basic Information

  • Plugin Name: dsh-plugin-custom-css
  • Core Value: Provides a switch and a real-time CSS textarea in the Settings panel
  • Maintainer: nguyenduclong-ict
  • Category: Fun Theming
  • License: MIT

Core Features

  • Settings Entry: Registers a “Custom CSS” row in the left navigation bar of the settings modal (sort order 40).
  • Switch Control: Enables or disables CSS injection via the switch; turning off the switch does not clear the saved code.
  • Real-time Injection: When typing in the textarea, the CSS is injected after a 500ms debounce and refreshed to the host on blur.
  • Storage Mechanism: Configuration is stored in ~/.dsh/plugins/dsh-plugin-custom-css/config. (if the $DSH_HOME environment variable is set, that directory takes precedence).
  • HTTP API: Provides GET/POST /api/custom-css/config endpoints for reading and writing configuration.
  • Design Tokens: Supports using Harness CSS variables (such as --dsw-alias-brand-primary, --dsw-font-*) for theme customization.

Installation and Enabling

After installation, the plugin must be activated at startup (included in dsh.profile.bundles); otherwise, Harness cannot load the plugin.

1. Install Dependencies

Navigate to the Web profile directory and use pnpm to install the plugin package:

Windows:

cd "$env:APPDATA\dsh-desktop\harness\profiles\web"
& "$env:APPDATA\dsh-desktop\harness\.desktop-bin\pnpm.cmd" add <path-to-this-package>

macOS:

cd "$HOME/Library/Application Support/dsh-desktop/harness/profiles/web"
"$HOME/Library/Application Support/dsh-desktop/harness/.desktop-bin/pnpm" add <path-to-this-package>

Linux:

cd ~/.config/dsh-desktop/harness/profiles/web
~/.config/dsh-desktop/harness/.desktop-bin/pnpm add <path-to-this-package>

2. Register the Plugin

Edit profiles/web/package.json and add the plugin name to the dsh.profile.bundles array:

{
  "dsh": {
    "profile": {
      "bundles": [
        "@deepseek-ai/dsh-base",
        "@deepseek-ai/dsh-web-app",
        "dsh-plugin-custom-css"
      ]
    }
  }
}

3. Restart the Application

After installation, restart DSH Desktop.

Usage

  1. Open Settings and click Custom CSS in the left navigation bar.
  2. Turn on the Enable custom CSS switch.
  3. Paste or write CSS in the textarea. The content takes effect in real time.
  4. Close the modal; the styles remain applied and are restored on the next startup.

Example Code

Use Harness design tokens to override the brand primary color:

:root {
  --dsw-alias-brand-primary: #22d3ee;
}

/* 调整字体大小 */
[data-conversation-scroll] {
  font-size: 15px;
  line-height: 1.7;
}

Technical Details and Notes

  • Injection Target: The CSS is injected into the <style id="dsh-custom-css-style"> element at the end of <head>, ensuring it overrides styles added by Harness at startup.
  • No Installation Modifications: The plugin only modifies runtime configuration and does not modify the Harness installation directory.
  • Reset Configuration: To clear the configuration, delete ~/.dsh/plugins/dsh-plugin-custom-css/config..
  • External Styles: Styles injected from other sources are not removed.