theme-dev

Files (3)

• SKILL.md
• starter-dark.json · templates/
• starter-light.json · templates/

SKILL.md (first lines)

# LAN Proxy Gateway · 皮肤开发 Skill

面向 AI agent 和人类开发者的主题 / 皮肤制作指南。
读完本文件即可**从零创建一套完整皮肤**，并通过 App 导入使用。

---

## 快速上手

### 1. 从内置皮肤导出模板

在 App **设置 → 外观主题** 右上角点击「导出」，得到当前主题的 `.json` 文件。
或者用命令行直接复制示例模板：

```bash
cp skills/theme-dev/templates/starter-dark.json my-theme.json
```

### 2. 编辑 JSON

用任意编辑器修改颜色、圆角、阴影等参数（字段说明见下方）。

### 3. 导入并预览

在 App **设置 → 外观主题** 点击「导入」，选择你的 `.json` 文件，即时生效。

### 4. 迭代调试

修改 JSON → 删除旧主题 → 重新导入，或直接编辑存储目录中的文件后切换主题刷新。

存储目录：`~/.config/lan-proxy-gateway/themes/`

---

## JSON Schema

一个主题文件是一个 JSON 对象，包含以下字段（**全部必填**）：

```jsonc
{
    "id":              "my-theme",       // 唯一标识，英文+连字符，不能与内置冲突
    "name":            "我的主题",        // 显示名称，支持中英文
    "isDark":          true,             // 是否为深色模式（影响系统控件适配）

    // ── 基础色板（全部为 sRGB [R, G, B]，取值 0.0–1.0）──────────
    "canvas":          [0.08, 0.09, 0.11],    // 最底层画布背景
    "sidebar":         [0.10, 0.11, 0.13],    // 左侧导航栏背景
    "panel":           [0.13, 0.14, 0.16],    // 卡片 / 面板背景
    "panelRaised":     [0.16, 0.18, 0.20],    // 悬浮 / 弹出面板背景
    "border":          [0.26, 0.28, 0.32],    // 边框 & 分割线

    // ── 语义色（用于数据可视化和状态指示）────────────────────
    "cyan":            [0.30, 0.76, 0.66],    // 主强调色 — 链接、活跃状态、图表主色
    "coral":           [0.94, 0.45, 0.40],    // 警告 / 错误 / 拒绝
    "lime":            [0.55, 0.79, 0.40],    // 成功 / 健康 / 直连
    "yellow":          [0.94, 0.70, 0.32],    // 提醒 / 学习中 / 待处理
    "muted":           [0.60, 0.64, 0.70],    // 次要文字 / 占位符

    // ── 材质参数 ─────────────────────────────────────
    "radius":          3,           // 卡片圆角 (px)
    "radiusSmall":     2,           // 小组件圆角 (px)
    "borderWidth":     1.0,         // 边框线宽 (px)
    "shadowOpacity":   0.5,         // 卡片阴影透明度 (0=无, 1=最重)
    "shadowRadius":    12,          // 卡片阴影模糊半径 (px)
    "fontDesign":      "default",   // 字体风格: "default" | "rounded" | "serif" | "monospaced"

    // ── 画布渐变（可选视觉层次）────────────────────────
    "canvasGradient":  [            // 空数组 [] = 纯色; 2个色值 = 垂直渐变
        [0.10, 0.11, 0.13],
        [0.07, 0.07, 0.09]
    ]
}
```

---

## 字段详解

### 颜色角色在 UI 中的映射

| 字段 | 在 App 中的位置 |
|------|----------------|
| `canvas` | 整体窗口背景，最大面积色块 |
| `sidebar` | 左侧导航栏、侧边状态条 |
| `panel` | 所有数据卡片、面板区域的背景 |
| `panelRaised` | 弹出窗口（Popover）、悬浮提示的背景 |
| `border` | 卡片边框、分割线、表格网格线 |
| `cyan` | **主强调色** — 侧栏选中态、链接、图表折线、活跃连接标记、勾选标记 |
| `coral` | **警告色** — 错误连接、拒绝规则、设备策略阀门、删除按钮 |
| `lime` | **成功色** — 健康指示、直连标记、操作成功通知条 |
| `yellow` | **提醒色** — UDP 标签、学习中规则、检查中状态 |
| `muted` | **次要文字** — 副标题、说明文字、禁用态标签 |

### 材质参数对风格的影响

| 参数 | 效果 |
|------|------|
| `radius` 大 (10–16) | 圆润柔和风格，适合浅色主题 |
| `radius` 小 (2–4) | 硬朗锐利风格，适合暗黑 / 工程主题 |
| `shadowOpacity` 0 | 平面化设计，无层次感 |
| `shadowOpacity` 高 (0.3–0.6) | 立体浮动卡片效果 |
| `fontDesign: "monospaced"` | 等宽字体，终端 / 黑客风格 |
| `fontDesign: "serif"` | 衬线字体，书报 / 文艺风格 |
| `fontDesign: "rounded"` | 圆体，可爱 / 友好风格 |
| `canvasGradient` 两色 | 画布有轻微渐变，增加深度感 |
| `canvasGradient` 空 | 纯色平面画布 |

---

## 设计建议

### 配色对比度

- `panel` 和 `canvas` 之间需要**可感知的明度差**（建议 ΔL ≥ 0.03），否则卡片会"沉入"背景
- 深色主题中 `border` 亮度建议比 `panel` 高 0.10–0.15
- 浅色主题中 `border` 亮度建议比 `panel` 低 0.10–0.15
- `muted` 与 `panel` 需保证 WCAG AA 对比度（4.5:1），否则次要文字难以辨认

### 语义色一致性

From Tght1211/lan-proxy-gateway, MIT.

More from Tght1211/lan-proxy-gateway