@dsh-theme/ti

Readme

# @dsh-theme/ti — Dota 2 The International skin for DeepSeek Harness

[English](#english) · [中文](#中文)

> **dsh-plugin** — a client plugin for the DeepSeek Harness web UI. It stacks a
> complete TI token layer (`light`/`dark` variants) via `theme.overrideTokens()`
> and paints an inline vector-wings + starfield background on the chat panel.

正值 Dota 2 The International 赛季，给 dsh Web 界面做的一款 **TI6** 皮肤：
深空蓝黑 + TI6 红飘带能量色 + 不朽盾金（gold），主面板带矢量翅膀 + 星空背景图。

## 它是怎么工作的

dsh Web 的皮肤机制由 `@deepseek-ai/dsh-client-ui-theme` 提供：

- 浏览器端有一个 `ThemeRuntime`（服务名 `theme`），内置 `light` / `dark` 两个主题，
  全部颜色都走 `--dsw-alias-*` / `--dsw-specific-*` CSS 变量（别名 token 层）。
- 本插件（`client.js`）用 **`theme.overrideTokens()`** 压一层完整的 TI 覆盖：
  - light → 「TI Light」浅色变体（冷蓝白 + 深海军蓝文字 + TI6 深红点缀）
  - dark  → 「TI Dark」深空蓝黑 + 猩红能量
  完全不写主题偏好，所以 `ui-theme` 的异步偏好回读（`adopt()`）影响不到皮肤。
- **主面板背景图**：注入 `<style>`，把 `wings.svg`（矢量翅膀）+ 星空 SVG 双层背景
  直接画在聊天滚动区（`[data-conversation-scroll]`）上，随 `data-ds-dark-theme`
  切换深浅两套；侧栏、气泡、卡片、输入框保持各自的不透明表面。

## 安装

### 方式一：一键安装（推荐）

```sh
dsh plugin --profile web add longyu065/dsh-theme-ti
```

### 方式二：手动安装

1. 把本包放进目标 profile 的依赖树（以 Windows 的 web profile 为例，
   `$DSH_HOME` 默认是 `%USERPROFILE%\.dsh`；Linux/macOS 是 `~/.dsh`）：

   ```powershell
   $dest = "$env:DSH_HOME\profiles\node_modules\@dsh-theme\ti"
   New-Item -ItemType Directory -Force $dest | Out-Null
   Copy-Item "dsh-theme-ti\*" $dest -Recurse -Force   # 或 git clone 后拷贝
   ```

2. 在 profile 的 `cordis.patch.yml`（如 `$DSH_HOME\profiles\web\cordis.patch.yml`）
   追加：

   ```yaml
   - insert:
       - id: theme-ti
         name: '@dsh-theme/ti'
   ```

3. 重启 `dsh web`（新增 loader 行属于插件集合变化，需重启；改 bundle 内容可走
   HMR 热更，刷新页面即可）。默认 `system` 偏好下即为 TI 皮肤。

## 使用 / 卸载

- 浅色模式 = TI Light，深色模式 = TI Dark，无需任何设置。
- 丝带动画层可在 **设置 → TI6 Wings** 中开关。
- 卸载：删除 `profiles\node_modules\@dsh-theme\ti` 和 patch 里的 `theme-ti` 行，重启。

### 一键卸载

```sh
dsh plugin --profile web remove longyu065/dsh-theme-ti
```

## 二次开发 / 换图

- 改 `client.js` 的 `TI_TOKENS` 换色；token 名以
  `dsh-client-ui-theme/lib/styles/design-platform.css` 为准，每个覆盖值必须是
  `{ light, dark }` 字符串对。
- 换翅膀图：把新图放到仓库根（`wings.svg` 优先，否则 `wings.png`），调整
  `build.mjs` 顶部的 `WINGS_OPACITY`（淡度，默认 `0.4`），然后：

  ```sh
  node build.mjs      # 重新内联 base64 到 client.js
  node smoke-test.mjs # 自检
  ```

  再把 `client.js` 同步到 profile 的安装目录，刷新页面生效（HMR）。
- 浏览器半必须自包含：无 import、无 JSX、无 TS。

## 包结构

```
dsh-theme-ti/
├── package.json     # dsh.bundle + dsh.client 声明：platform=web，exports ./client
├── index.js         # host 半（no-op）：让 loader 行可激活，client-modules 扫描才收录本包
├── client.js        # 浏览器半：overrideTokens 压 TI 覆盖层 + 丝带动画 + 背景图 CSS（构建产物，含 wings base64）
├── build.mjs        # 把 wings.svg/png base64 内联进 client.js（换图后重跑）
├── smoke-test.mjs   # 自检脚本
├── wings.svg        # 翅膀背景（矢量，默认图源）
├── wings.png        # 翅膀背景（位图回退）
├── tokens.md        # TI 配色与 token 对照表
├── cordis.patch.yml # dsh bundle 声明：插件集合行
└── LICENSE          # MIT
```

## English

A client skin plugin for the [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness)
web UI, themed on Dota 2 The International 2016 (TI6): deep void-navy surfaces
with TI6 crimson ribbon-red and Aegis-gold accents, plus a vector-wings +
starfield background on the main chat panel.

How it works: the plugin stacks alias-token overrides via
`theme.overrideTokens()` (`light` → "TI Light" cool-blue variant, `dark` → "TI
Dark" starfield) and injects a `<style>` block that paints the inline wings
artwork directly on the chat scroll column. The theme preference is never
written, so the ui-theme service's async re-adoption cannot reset the skin.

Install:

```sh
# One-click install (recommended)
dsh plugin --profile web add longyu065/dsh-theme-ti

# Or manual: copy the package into `<profile>/node_modules/@dsh-theme/ti`,
# append the `theme-ti` row to the profile's `cordis.patch.yml`, restart `dsh web`.
```

The ribbon animation layer can be toggled in **Settings → TI6 Wings**.

License: MIT