← Back to home@nguyenduclong-ict

dsh-plugin-custom-css

Custom CSS injection for DeepSeek Harness: a Settings section with an on/off toggle and a live CSS textarea

Stars
0
Language
JavaScript
Created
Sep 11, 2026
Updated
Sep 11, 2026
Theme
GitHub repo

Introduction

dsh-plugin-custom-css

English | Tiếng Việt

Custom CSS injection for DeepSeek Harness (DSH / DSH Desktop).

It adds one row to the Settings modal — Custom CSS — which opens a page with:

  • an on/off toggle that enables or disables injection, and
  • a CSS textarea whose contents are injected into the Web GUI live, as you type.

1. What it does

PieceBehavior
Settings entryRegisters a settings.section row (order 40) labelled Custom CSS in the Settings modal nav rail.
ToggleInjects or stops injecting the snippet. Turning it off keeps the saved code.
TextareaInjected on every keystroke (debounced host write, 500 ms). Flushed to the host on blur.
Injection targetA single <style id="dsh-custom-css-style"> element, re-appended to the end of <head> on every write so it wins the cascade against styles the Harness appends while booting.
Storage~/.dsh/plugins/dsh-plugin-custom-css/config.json ($DSH_HOME wins when set), served over GET/POST /api/custom-css/config, mirrored into localStorage so the snippet is applied before the first paint of the next launch.
Localeszh, en, vi dictionaries are registered under the custom-css namespace (falls back to en).

Nothing else is touched: styles injected by other sources are never removed, and the plugin does not modify the Harness installation.

2. Installation (DSH Desktop, Windows)

# 1. From this repository's parent directory, install the package into the web profile
cd "$env:APPDATA\dsh-desktop\harness\profiles\web"
& "$env:APPDATA\dsh-desktop\harness\.desktop-bin\pnpm.cmd" add <path-to-this-package>
#   e.g. pnpm add C:\Users\you\Desktop\Code\dsh-plugins\dsh-plugin-custom-css
#   or   pnpm add https://github.com/<user>/dsh-plugin-custom-css

Then add the package name to the profile's bundle list — edit %APPDATA%\dsh-desktop\harness\profiles\web\package.json:

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

Restart DSH Desktop. The plugin must be in dsh.profile.bundles, otherwise the Harness never loads it.

Note — any entry in dsh.profile.bundles must activate during boot. If the plugin cannot activate, the whole Web UI fails to boot with web boot: N entries did not activate.

macOS / Linux

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

DSH CLI

dsh plugin --profile web add <path-to-this-package>

3. Usage

  1. Open Settings (sidebar foot) → the Custom CSS row in the left nav.
  2. Flip Enable custom CSS on.
  3. Paste or write CSS into the textarea. It is injected immediately.
  4. Close the modal — the styles stay applied and are restored on the next launch.

Example snippets

/* Recolor the brand accent */
:root {
  --dsw-alias-brand-primary: #22d3ee;
}

/* Wider, calmer conversation column */
[data-conversation-scroll] {
  font-size: 15px;
  line-height: 1.7;
}

Design tokens available to a snippet are the Harness CSS custom properties (--dsw-alias-*, --dsw-font-*), so a theme can stay consistent with whatever light/dark variant DSH is using.

4. Files

FileRole
package.jsonManifest: dsh.bundle.patch + dsh.client (platform: web, immediately, inject).
cordis.patch.ymlBundle patch that inserts this package into the loader tree.
index.jsHost half: GET/POST /api/custom-css/config and the $DSH_HOME-based JSON store.
client.jsBrowser half: style injection, Settings section, toggle + textarea.
install.ps1Windows installer (pnpm add + register the bundle entry).
config.jsonCreated at runtime under ~/.dsh/plugins/dsh-plugin-custom-css/.
smoke-test.mjsBrowser-half test: runs client.js against a DOM/React stub and asserts the injection, toggle, and persistence behavior.
host-test.mjsHost-half test: mounts the real route on node:http and asserts GET/POST/OPTIONS, merge semantics, and restart recovery.
LICENSEMIT.
.gitignoreKeeps runtime state (config.json, plugins/) out of the repository.

Tests

node smoke-test.mjs   # browser half
node host-test.mjs    # host half

5. HTTP API

MethodPathBodyResponse
GET/api/custom-css/config—{ "enabled": boolean, "css": string }
POST/api/custom-css/config{ "enabled"?: boolean, "css"?: string }current config plus saved: boolean

6. Development notes

  • The browser bundle is hand-written framework-form CJS (window.__ModuleLoader__.load) and requires only platform seed modules — react, react/jsx-runtime — so it declares no dsh.client.external edges.
  • Edit client.js and restart the app (or let the Harness HMR reload the plugin bundle if your setup watches it).
  • To reset everything, delete ~/.dsh/plugins/dsh-plugin-custom-css/config.json.

License

MIT © nguyenduclong-ict