dsh-plugin-custom-css

Name: nguyenduclong-ict/dsh-plugin-custom-css
Author: nguyenduclong-ict

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

Piece	Behavior
Settings entry	Registers a `settings.section` row (order `40`) labelled Custom CSS in the Settings modal nav rail.
Toggle	Injects or stops injecting the snippet. Turning it off keeps the saved code.
Textarea	Injected on every keystroke (debounced host write, `500 ms`). Flushed to the host on blur.
Injection target	A 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.
Locales	`zh`, `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

Open Settings (sidebar foot) → the Custom CSS row in the left nav.
Flip Enable custom CSS on.
Paste or write CSS into the textarea. It is injected immediately.
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

File	Role
`package.json`	Manifest: `dsh.bundle.patch` + `dsh.client` (`platform: web`, `immediately`, `inject`).
`cordis.patch.yml`	Bundle patch that inserts this package into the loader tree.
`index.js`	Host half: `GET/POST /api/custom-css/config` and the `$DSH_HOME`-based JSON store.
`client.js`	Browser half: style injection, Settings section, toggle + textarea.
`install.ps1`	Windows installer (pnpm add + register the bundle entry).
`config.json`	Created at runtime under `~/.dsh/plugins/dsh-plugin-custom-css/`.
`smoke-test.mjs`	Browser-half test: runs `client.js` against a DOM/React stub and asserts the injection, toggle, and persistence behavior.
`host-test.mjs`	Host-half test: mounts the real route on `node:http` and asserts GET/POST/OPTIONS, merge semantics, and restart recovery.
`LICENSE`	MIT.
`.gitignore`	Keeps 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

Method	Path	Body	Response
`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

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

Piece	Behavior
Settings entry	Registers a `settings.section` row (order `40`) labelled Custom CSS in the Settings modal nav rail.
Toggle	Injects or stops injecting the snippet. Turning it off keeps the saved code.
Textarea	Injected on every keystroke (debounced host write, `500 ms`). Flushed to the host on blur.
Injection target	A 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.
Locales	`zh`, `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

Open Settings (sidebar foot) → the Custom CSS row in the left nav.
Flip Enable custom CSS on.
Paste or write CSS into the textarea. It is injected immediately.
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

File	Role
`package.json`	Manifest: `dsh.bundle.patch` + `dsh.client` (`platform: web`, `immediately`, `inject`).
`cordis.patch.yml`	Bundle patch that inserts this package into the loader tree.
`index.js`	Host half: `GET/POST /api/custom-css/config` and the `$DSH_HOME`-based JSON store.
`client.js`	Browser half: style injection, Settings section, toggle + textarea.
`install.ps1`	Windows installer (pnpm add + register the bundle entry).
`config.json`	Created at runtime under `~/.dsh/plugins/dsh-plugin-custom-css/`.
`smoke-test.mjs`	Browser-half test: runs `client.js` against a DOM/React stub and asserts the injection, toggle, and persistence behavior.
`host-test.mjs`	Host-half test: mounts the real route on `node:http` and asserts GET/POST/OPTIONS, merge semantics, and restart recovery.
`LICENSE`	MIT.
`.gitignore`	Keeps 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

Method	Path	Body	Response
`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.

nguyenduclong-ict/dsh-plugin-custom-css

dsh-plugin-custom-css

1. What it does

2. Installation (DSH Desktop, Windows)

macOS / Linux

DSH CLI

3. Usage

Example snippets

4. Files

Tests

5. HTTP API

6. Development notes

License

Community comments

nguyenduclong-ict/dsh-plugin-custom-css

dsh-plugin-custom-css

1. What it does

2. Installation (DSH Desktop, Windows)

macOS / Linux

DSH CLI

3. Usage

Example snippets

4. Files

Tests

5. HTTP API

6. Development notes

License

Community comments