# one-dark-pro-dsh-plugin

适用于 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) Web UI 的 One Dark Pro 主题插件。

安装本插件后，DSH Web 界面的 **设置 → 通用设置** 中会出现一个 **One Dark Pro** 开关。开启后，整个界面会切换为经典的 VSCode One Dark Pro 暗色配色。

> [English README](./README.md)

## 功能特性

- 通过官方 `ctx.theme` 服务注册第三方 `one-dark-pro` 主题
- 在 **设置 → 通用设置** 提供一键开关
- 开启时将基础外观切换为深色，并叠加 One Dark Pro 的 token 覆盖层
- 启用状态持久化到浏览器 `localStorage`
- 关闭时自动恢复之前的浅色/深色/跟随系统偏好
- 支持多标签页同步

## 截图展示

| 开启前（浅色主题） | 开启后（One Dark Pro） |
|---|---|
| ![浅色主题](./docs/screenshots/light-theme.png) | ![One Dark Pro 暗色主题](./docs/screenshots/dark-theme.png) |

**设置 → 通用设置** 中的开关行：

![One Dark Pro 开关关闭](./docs/screenshots/settings-off.png)
![One Dark Pro 开关开启](./docs/screenshots/settings-on.png)

## 安装方式

### 方式 A：从 GitHub 安装（最简单）

```sh
dsh plugin --profile web add github:yudaxia1/one-dark-pro-dsh-plugin
```

> 通过 GitHub 安装时会执行 `prepare` 脚本在本地构建插件。如果使用 pnpm ≥ 10，需要先在 profile 的 `pnpm-workspace.yaml` 中授权构建：
> ```yaml
> onlyBuiltDependencies:
>   - one-dark-pro-dsh-plugin
> ```

### 方式 B：从本地 tarball 安装

先构建插件（见下方“开发”章节），然后打包并安装到 `web` profile：

```sh
cd one-dark-pro-dsh-plugin
pnpm pack
dsh plugin --profile web add ./one-dark-pro-dsh-plugin-0.1.0.tgz
```

安装后可在不启动服务的情况下验证插件层是否已注入：

```sh
dsh --profile web --dump-config
```

然后重启 `dsh web` 并打开 Web UI。

### 方式 C：在 DSH monorepo 中从源码开发安装

开发时可将本目录放到 DSH 源码中，以便复用 monorepo 的 tsdown 配置：

```powershell
# Windows 建议使用 junction，这样两边修改实时同步
New-Item -ItemType Junction -Path deepseek-harness\packages\client\one-dark-pro-dsh-plugin -Target one-dark-pro-dsh-plugin
```

在 `deepseek-harness/tsconfig.client.json` 的 references 中加入：

```jsonc
{ "path": "./packages/client/one-dark-pro-dsh-plugin" }
```

构建客户端库：

```sh
cd deepseek-harness
pnpm run build:lib:client
```

最后从工作区副本打包并按方式 A 安装。

## 卸载

```sh
dsh plugin --profile web remove one-dark-pro-dsh-plugin
```

## 开发

本插件使用 TypeScript 编写，依赖 DSH 共享的 `clientBundle` tsdown 预设，因此需要在 `deepseek-harness` monorepo 中构建。

```sh
# 在 packages/client/one-dark-pro-dsh-plugin 创建 junction 后
cd deepseek-harness
pnpm run build:lib:client
```

构建产物：

- `lib/index.js` — Host 端入口
- `lib/invariant.js` — 共享常量
- `lib/client.js` — 浏览器端 bundle
- `lib/types/` — TypeScript 类型声明

## 配色映射

One Dark Pro 的配色已映射到 DSH 的语义 token。完整映射见 `src/client/color-themes.ts`，关键 token 如下：

| DSH token | One Dark Pro |
|---|---|
| `--dsw-alias-bg-base` | `#282c34` |
| `--dsw-alias-bg-layer-1` | `#21252b` |
| `--dsw-alias-bg-layer-2` | `#2c313c` |
| `--dsw-alias-bg-layer-3` | `#3a404d` |
| `--dsw-alias-label-primary` | `#abb2bf` |
| `--dsw-alias-label-secondary` | `#828997` |
| `--dsw-alias-label-tertiary` | `#5c6370` |
| `--dsw-alias-brand-primary` | `#528bff` |
| `--dsw-alias-border-l1` | `#181a1f` |
| `--dsw-alias-border-l2` | `#3e4452` |
| `--dsw-alias-button-primary-fill` | `#528bff` |
| `--dsw-alias-interactive-bg-hover` | `#ffffff0a` |
| `--dsw-alias-state-error-primary` | `#e06c75` |
| `--dsw-alias-state-success-primary` | `#98c379` |
| `--dsw-alias-state-warn-primary` | `#d19a66` |
| `--dsw-specific-sidebar-fill` | `#21252b` |
| `--dsw-specific-input-major` | `#21252b` |
| `--dsw-specific-bubble` | `#2c313c` |

## 许可证

MIT