tamabox/docs/theme-shiroko.md

主题「砂狼白子」（shiroko）

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

[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. 文件是否随二进制发布了 —— 直接取一次静态资源：

   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：

   [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。