# dsh-themes

Appearance skin pack for the DeepSeek Harness Web GUI: 5 classic colorways (Nord / Gruvbox / Solarized / Dracula / Tokyo Night), each with a light and a dark variant — **10 selectable themes** in total.

After installation a **Theme skins** row appears in **Settings → General**; click a swatch to apply, the choice survives reloads.

中文说明见 [README.md](README.md)。

## Skins

| Skin | Light | Dark | Style |
| --- | --- | --- | --- |
| **Nord** | `nord-light` | `nord-dark` | Arctic blue-gray with frost accents |
| **Gruvbox** | `gruvbox-light` | `gruvbox-dark` | Retro warm sepia, muted earth tones |
| **Solarized** | `solarized-light` | `solarized-dark` | Low-contrast precision, same accents in both schemes |
| **Dracula** | `dracula-light` | `dracula-dark` | Purple-tinted dark with neon accents |
| **Tokyo Night** | `tokyo-light` | `tokyo-dark` | Cyber indigo (dark = Night, light = official Day palette) |

Previews (settings page):

| Nord | Gruvbox | Solarized | Dracula | Tokyo Night |
| --- | --- | --- | --- | --- |
| ![nord-dark](assets/previews/nord-dark.png) | ![gruvbox-dark](assets/previews/gruvbox-dark.png) | ![solarized-dark](assets/previews/solarized-dark.png) | ![dracula-dark](assets/previews/dracula-dark.png) | ![tokyo-dark](assets/previews/tokyo-dark.png) |
| ![nord-light](assets/previews/nord-light.png) | ![gruvbox-light](assets/previews/gruvbox-light.png) | ![solarized-light](assets/previews/solarized-light.png) | ![dracula-light](assets/previews/dracula-light.png) | ![tokyo-light](assets/previews/tokyo-light.png) |

Every variant overrides 49 semantic tokens (background / border / text / buttons / states / code blocks / sidebar / overlays…); tokens a variant does not set fall back to the built-in base palette, so every scheme stays legible.

## Install

### From GitHub (recommended)

```sh
dsh plugin --profile web add github:heiyouhu/dsh-themes
```

pnpm ≥ 10 refuses to run a git dependency's `prepare` script until allowed. The first `add` fails and prints the exact package key; copy it into the profile's `pnpm-workspace.yaml` and re-run:

```yaml
# $DSH_HOME/profiles/<profile>/pnpm-workspace.yaml
allowBuilds:
  dsh-themes: true
```

> ⚠️ Allowing a build means letting the package run install-time code on your machine. Only allow packages you trust, and pin a commit (`add github:heiyouhu/dsh-themes#<sha>`) so a later push cannot silently change what runs.

### Local directory / tarball (no build permission needed)

```sh
dsh plugin --profile web add ./dsh-themes            # cloned checkout
dsh plugin --profile web add ./dsh-themes-0.1.0.tgz  # pnpm pack output
```

### npm

```sh
dsh plugin --profile web add dsh-themes
```

## Usage

1. Boot the Web GUI: `dsh --profile web`.
2. Open **Settings → General** and find the **Theme skins** row.
3. Click the light/dark swatch of any skin — the UI switches immediately.

### Selection semantics

- The skin choice and the built-in light/dark/system preference share one preference slot: **the later selection wins**.
- The skin choice is persisted in browser localStorage (per browser, not synced across devices); on reload the stored skin is restored as long as the built-in preference is `system` (the default).
- Clicking a built-in light/dark cube suspends the skin (built-in preference wins); clicking back to `system` restores it.

## Uninstall

```sh
dsh plugin --profile web remove dsh-themes
```

If the skin was active at removal, the theme falls back to the default (existing ThemeRuntime semantics).

## Compatibility

- Target DSH: `0.1.0-rc.x` Web GUI compositions.
- Theme ids are globally unique (`<skin>-<scheme>` prefix); registering a duplicate id fails the boot loudly (existing DSH behavior).

## Development

```sh
pnpm install
pnpm typecheck   # type check
pnpm check       # skin data gate (role coverage / unique ids / valid colors)
pnpm build       # emits lib/client.js (tsdown, contract-matching DSH clientBundle)
```

### Adding a skin

1. Append a `skin({ key, name, light, dark })` to the `SKINS` array in [`src/skins.ts`](src/skins.ts) with both `PaletteScheme` sets (`key` becomes the theme-id prefix).
2. Add any display name to [`src/client/locales.ts`](src/client/locales.ts).
3. Run `pnpm check && pnpm typecheck && pnpm build`.

### Packaging

```sh
pnpm build
pnpm pack      # emits dsh-themes-<version>.tgz
```

## License

MIT © heiyouhu. Palette definitions remain the property of their original scheme authors (Nord / Gruvbox / Solarized / Dracula / Tokyo Night).