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.
License
MIT © nguyenduclong-ict
