# 主题「砂狼白子」（shiroko）

阿拜多斯学园风格的灰蓝／银白配色，附带 Q 版人物插画。启用方式：

```ini
[theme]
available = default,sakura,shiroko
```

箱主在「账号设置 → 主题外观」里选择即可。作用范围与其他主题一致：提问箱页面、本人投票页、`/user` 后台。

## 配色

| 令牌 | 浅色 | 深色 |
| --- | --- | --- |
| `--tb-bg` / `--tb-navbar` | `#edf2f8` | `#141a22` |
| `--tb-surface` | `#ffffff` | `#1d2530` |
| `--tb-surface-2` | `#e5ecf5` | `#273140` |
| `--tb-border` | `#d6e0ec` | `#334052` |
| `--tb-text` | `#222d3b` | `#e3eaf4` |
| `--tb-primary` | `#4a7fc1` | `#6fa3e0` |

## 视觉构图

参考对象：**蔚蓝档案 JP 官网首页**（`https://bluearchive.jp/`）。它的做法不是"白底 + 留白里贴几个人物"，
而是 **整个视口是一张场景插画，UI 浮在场景之上**。本主题照这个结构重排：

| 层 | 内容 | 实现 |
| --- | --- | --- |
| 底层 | 教室场景插画（压白 38%、轻度虚化） | `--tb-page-image`，16:9 桌面 / 9:16 移动两张 |
| 中层 | 卡片与顶栏：半透明白 + `backdrop-filter` 磨砂 | `--tb-surface: rgba(255,255,255,.86)` / `--tb-navbar` |
| 上层 | 人物站在场景左侧地面（337px 高）+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 |
| 深色 | 不用场景（白天教室压在深底上会脏），回到深色渐变 + 极淡纹样 | 深色块单独覆盖 |

摆位经验（都是踩过的）：

- **不要四角各摆一个人**。人物之间、人物与内容之间都没有关系，读起来就是贴纸墙纸；
  人物必须"站在场景里"——有地面、有阴影、有环境，才不像贴纸。
- **右下角不能放人**。页脚文案右对齐（社区规则 / 备案号 / 存活时长），会和人物挤在一起。
- **离底边留 36px**。脚踩在窗口最后一行像素上会被读成"被裁切"，抬高之后必须配接触阴影，否则变成悬空。
- **纹样不要压在实景上**。平铺纹样叠在教室插画上会变成噪点，只在深色（无场景）时使用。
- **背景图会被 `cover` 裁切**，所以场景里不能有必须完整露出的元素：教室的黑板和窗户都在中部，裁掉两头不影响。
- **人物比例要跟场景对得上**。340px 是相对"站在前景"的尺度；缩到 240px 以下会显得像贴纸浮在半空。

## 素材清单

位于 `static/images/themes/shiroko/`，已随二进制嵌入（`static/fs.go` 的 `images/themes`）。

| 文件 | 用途 | 尺寸 | 体积 |
| --- | --- | --- | --- |
| `chibi/wave.webp` | 挥手 | 324×620 | 27KB |
| `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB |
| `chibi/think.webp` | 托腮 | 283×620 | 26KB |
| `chibi/doze.webp` | 打瞌睡 | 274×620 | 26KB |
| `chibi/sit.webp` | 盘腿坐 | 321×620 | 29KB |
| `scene-desktop.webp` | 教室场景（16:9，压白 38% + 虚化 1.4px） | 1920×1080 | 22KB |
| `scene-mobile.webp` | 教室场景（9:16 中裁） | 720×1003 | 6KB |
| `pattern-dark.svg` | 深色模式平铺纹样（雪花 + 光环） | 240×240 | 0.7KB |

## 来源与授权

| 素材 | 来源 |
| --- | --- |
| `static/images/shiroko-cutout.png` | **用户自行用 AI 生成**的立绘，仅作生成参考图，不再上页面 |
| `chibi/*.webp` | WorkBuddy ImageGen **以用户立绘为参考图**（image-to-image）生成，再抠白底 |
| `scene-desktop.webp` / `scene-mobile.webp` | WorkBuddy ImageGen 生成（提示词见下），未使用任何外部素材 |
| `pattern-dark.svg` | 手写 SVG，纯几何，无外部素材 |

### 生成与抠图参数

- 参考图：`static/images/shiroko-cutout.png`，`input_fidelity: high`，保证角色造型与平涂风格一致；
- 提示词骨架（四个姿态共用，只改动作句）：

  > Same character, same art style as the reference image: flat vector illustration, no outlines,
  > simple shapes, soft pastel colors, minimal detail. A chibi anime girl with short fluffy
  > silver-grey bob hair, pointed grey wolf ears, a small tilted cyan halo ring above her head,
  > pale blue dot eyes, cyan scarf, dark navy blazer, light grey pleated skirt, cyan and black
  > sneakers. { 动作 } Plain pure white background (#FFFFFF), no shadow, no ground, no text, no watermark.

- 动作句：`Standing full body, front view, one arm raised waving hello with a small smile` /
  `both arms raised up cheering happily, big smile` /
  `one hand resting on her cheek thinking, head slightly tilted` /
  `eyes closed sleeping peacefully, head drooping slightly to one side`；
- 抠图：从四角 + 四边中点共 8 点做 floodfill（容差 16），再对 alpha 做 1px MinFilter 收边去白边，
  裁 bbox 后统一缩放到高 620、WebP q90。

关键经验：**必须是"平涂无描边"**。先试过用手写 SVG 线稿，风格和用户那张立绘（色块、无描边）冲突，
而且没有真人手感会画得很抽象；用参考图 + image-to-image 出来的四张，角色特征和画风都稳。

**版权说明**：砂狼白子（砂狼シロコ）是《蔚蓝档案》的角色，版权归 NEXON Games / Yostar。
本主题为**非商用同人装饰**，仅作个人站点外观使用；若站点转为商业用途，请自行取得授权或换成原创素材。

## 替换 / 扩素材

1. 加姿态：按上面的提示词骨架换动作句生成，白底 → 抠图 → 存 `chibi/<name>.webp`（高 620），
   再塞进 `shiroko.css` 的 `--tb-deco`（记得保持 6 个值，并按上面的摆位原则定位）。
2. 换立绘：透明 PNG 覆盖 `static/images/shiroko-cutout.png`，再按同一提示词骨架重新生成姿态。
3. 换配色：改 `shiroko.css` 的令牌即可，插画是位图，换色需重新生成。
4. 新增素材不需要改 `static/fs.go`（已嵌整个 `images/themes` 目录）；但改了 CSS 必须把
   `conf.StaticVersion` +1，否则老访客吃缓存看不到变化。

## 部署后设置页看不到这个主题？

先分两步确认，不要一上来就怀疑缓存：

1. **文件是否随二进制发布了** —— 直接取一次静态资源：

   ```bash
   curl -o /dev/null -w "%{http_code}\n" \
     https://<你的域名>/static/css/themes/shiroko.css?v=<StaticVersion>
   ```

   返回 200 说明 css 已经嵌进去了；返回 404 说明部署的是旧二进制。

2. **是否登记进 `[theme] available`** —— 主题列表是启动时按白名单构建的，
   css 在但没登记，设置页就看不到它。检查 `conf/app.ini`：

   ```ini
   [theme]
   default = default
   available = default,sakura,shiroko
   ```

   改完**重启**进程（`[theme]` 只在启动时读）。

启动日志会直接告诉你缺哪一行：

```
level=info  msg="主题注册表已加载" enabled="default,sakura"
level=warning msg="[theme] available 未登记以下主题，它们不会出现在设置页"
      available="default,sakura,shiroko" themes=shiroko
```

## 场景图的生成

整页背景是一张生成的教室插画，提示词：

```
Empty Japanese high school classroom in the afternoon, flat pastel anime background art,
very light and airy, pale blue-grey and warm cream palette, rows of desks softly out of focus,
big windows with soft daylight, thin clean shapes, low contrast, minimal detail,
large calm empty area in the center, no characters, no text, no watermark,
wide scene suitable as a website background
```

生成后处理（PIL，脚本未入库，参数记在这里）：

1. 裁掉图片底部 160px —— 生成器会在右下角打 `AI生成 WORKBUDDY` 水印，不裁会出现在页面上；
2. 按 16:9 取顶部 864px，整体混白 38%（`v*0.62 + 255*0.38`）—— 保证白卡片放上去仍有足够对比度；
3. 高斯模糊 1.4px，让桌椅不抢正文；
4. 导出 WebP q80（1920×1080，22KB）；移动端从同一张按 9:16 中裁 620px 宽，导出 720×1003。