# dsh-theme-customizer
[](https://www.npmjs.com/package/dsh-theme-customizer)
[](LICENSE)
[](https://github.com/topics/dsh-plugin)
[](https://github.com/lxxz1918/dsh-theme-customizer/stargazers)
**English** | [δΈζ](README.md)
> A theme customizer plugin for the DeepSeek Harness (DSH) web UI. Backgrounds, text colors, borders and details β all adjustable visually, persisted across restarts.
> Config is stored in localStorage; presets can be exported as `.tczp` files (images included) and shared with any machine.
## π¨ Theme Gallery
Four AI-generated wallpaper themes, each with two main-UI "display area" modes: **include sidebar** and **exclude sidebar**, plus matching `.tczp` presets for one-click import (see "Asset Pack" below).
| π Aurora Nights (dark) | π Sunset Clouds (bright) |
|:---:|:---:|
|  |  |
| **π Cyber Nights (dark)** | **πΈ Sakura Sky (bright)** |
|  |  |
## πΈ Screenshots
Each theme has two modes (presets `-0` / `-1`): **display area includes sidebar** and **display area excludes sidebar** . Each mode has 3 shots: front-1 / front-2 / settings.
π Aurora Nights (dark)
**Display area includes sidebar (-0)**
| Front 1 | Front 2 | Settings |
|:---:|:---:|:---:|
|  |  |  |
**Display area excludes sidebar (-1)**
| Front 1 | Front 2 | Settings |
|:---:|:---:|:---:|
|  |  |  |
π Sunset Clouds (bright)
**Display area includes sidebar (-0)**
| Front 1 | Front 2 | Settings |
|:---:|:---:|:---:|
|  |  |  |
**Display area excludes sidebar (-1)**
| Front 1 | Front 2 | Settings |
|:---:|:---:|:---:|
|  |  |  |
π Cyber Nights (dark)
**Display area includes sidebar (-0)**
| Front 1 | Front 2 | Settings |
|:---:|:---:|:---:|
|  |  |  |
**Display area excludes sidebar (-1)**
| Front 1 | Front 2 | Settings |
|:---:|:---:|:---:|
|  |  |  |
πΈ Sakura Sky (bright)
**Display area includes sidebar (-0)**
| Front 1 | Front 2 | Settings |
|:---:|:---:|:---:|
|  |  |  |
**Display area excludes sidebar (-1)**
| Front 1 | Front 2 | Settings |
|:---:|:---:|:---:|
|  |  |  |
## Features
- **Interface module (7 background areas)**: Main / Sidebar / Conversation / Composer / Settings panel / Floating panel / Cordis panel
- Each area: None / Solid color / Image (with crop & selection) + opacity (**larger value = more transparent**) + base color (independent layer)
- Main background supports "include sidebar / exclude sidebar" display area toggle
- Sidebar image fades out directly via mask β never covers the top UI or the settings panel
- **Independent "when collapsed" settings** for both Main and Sidebar (applied when the sidebar is folded; cross-fade transition on toggle)
- **Borders module**: color + opacity for all default UI borders/dividers, independently for 5 areas (Main incl. sidebar / Cordis / Composer / Settings / Floating panel)
- **Text colors module**: 5 categories (Body / Process / Auxiliary / Faded / Accent), shared across light & dark themes, restorable to official defaults
- **Brand color**: color + opacity for the top-left DeepSeek Harness logo; the "Harness" wordmark can be tinted separately; the collapsed-sidebar logo (whale icon) has its own independent setting (follows the expanded state by default)
- **Welcome page tinting**: on the empty state, the whale icon / "ζ’η΄’ζͺθ³δΉε’" headline / "ι’θ§η" badge text / badge background can each be tinted with color + opacity (official colors by default, decoupled from the body text color)
- **Conversation details**: user bubble / inline code / code block background / code block scrollbar / conversation scrollbar / todo panel collapsed & expanded / "scroll to bottom" button background
- **Composer**: background, fixed input height (1β10 rows), stats line takeover (9 independent toggles + full expand), command button & menu backgrounds
- **New session button**: None/Solid/Image style + show text/icon toggles + independent icon/text colors + base color
- **Layout**: draggable settings panel (drag its header; position persisted; one-click reset)
- **Floating panel**: a draggable mini settings panel (choose which modules to show), always on top
- **Presets**: save/apply/rename/delete/export/import (`.tczp`, images included, up to 10) + drag-to-reorder
- **Global reset**: one click to restore all defaults (3-step confirm to prevent accidents)
## Installation
```bash
# Option 1: npm (published package)
npm install -g dsh-theme-customizer
dsh plugin --profile web add dsh-theme-customizer
# Option 2: local directory (after cloning this repo)
dsh plugin --profile web add
```
Then **restart dsh web** for it to take effect. Verify: Settings β Theme should appear.
## Usage
1. Open **Settings β Theme** and adjust by module; changes apply instantly and save automatically (the bottom of the page shows "last saved" time)
2. For quick tweaks, click "β Open float panel" at the top right β the panel is draggable
3. To verify the conversation-area options, use the test text in [ε―Ήθ―εΊζ΅θ―ζ什.md](ε―Ήθ―εΊζ΅θ―ζ什.md)
## Persistent Cordis button (optional)
The "Cordis button always visible" toggle in Theme settings **requires patching the dsh-client-ui-cordis package** (provided by this plugin's `apply-patch.cjs`); without the patch the toggle has no effect. Install:
```bash
node apply-patch.cjs # apply patch (auto backup)
node apply-patch.cjs --check # check status
node apply-patch.cjs --undo # revert
```
β οΈ **DSH upgrades overwrite the official package** β re-run `apply-patch.cjs` after upgrading. Details in [PATCH-CORDIS-BUTTON.md](PATCH-CORDIS-BUTTON.md).
## Build from source (developers)
```bash
# 1. Concatenate source fragments (optimized/src/ β optimized/dist/, with syntax check + line map/symbols)
node optimized\build.cjs
# 2. Generate the static client bundle (dist/p3_2_client.js β lib/client.js)
node build_static.cjs optimized\dist\p3_2_client.js lib\client.js
# 3. Syntax check + install for testing
node --check lib\client.js
dsh plugin --profile web add
```
Source layout: `optimized/src/` contains 16 fragments (`00_*`~`15_*` + `host.js`) concatenated in filename order into the plugin function body. Look up features in `optimized/INDEX.md`.
## Preset files (.tczp)
Presets panel β "Import preset" and pick a `.tczp` file to restore a whole config (images included β no original files needed). Export each preset via "Export" in the same panel.
## π¦ Asset Pack
The **full assets** for all four themes (original wallpapers + 8 `.tczp` presets + all showcase screenshots) are packed in `assets.7z` attached to [GitHub Releases](https://github.com/lxxz1918/dsh-theme-customizer/releases). Download and extract with 7-Zip:
```
ε±η€Ί/
βββ readmeε±η€ΊεΎ/ # README screenshots (4 themes Γ 2 variants Γ 3 shots)
βββ ε±η€Ί1/ ~ ε±η€Ί4/ # Each: original wallpapers (landscape + portrait) + 2 .tczp presets + shots
βββ (wallpaper originals: ε±η€ΊN/N-0, N-1)
```
> Import: Settings β Theme β Presets β Import β pick `ε±η€ΊN-N.tczp` β images included, full effect restored in one click.
## Uninstall
```bash
dsh plugin --profile web remove dsh-theme-customizer
```
## Contact & Feedback
- Bugs / feature requests β open an [issue](https://github.com/lxxz1918/dsh-theme-customizer/issues)
- Maintenance: issues are reviewed and replied to **every Sunday**
- Bilibili: [homepage](https://space.bilibili.com/38175333)
## AI Usage
This project is designed and reviewed by [lxxz1918](https://github.com/lxxz1918); the code is written with the assistance of an AI assistant (DeepSeek). All feature requirements, UI copy and final results are confirmed by the author.
## License
[MIT](LICENSE)