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
上层	人物站在场景左侧地面（400px 高）+ 椭圆接触阴影	--tb-deco 前两个槽位
空气层	左窗光柱 / 右侧暖散景 / 脚下地面光斑 / 底部压深	--tb-deco 后四个槽位（全是渐变）
深色	不用场景（白天教室压在深底上会脏），回到深色渐变 + 极淡纹样	深色块单独覆盖

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

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

空气层（2026-10-20 加）

场景压白 38% 之后整页亮度都在 235~246 之间，"再加点东西"直接摆物件一定会突兀。加了四层纯渐变：

槽位	作用	值
3	左窗光柱（从左上斜下）	linear-gradient(112deg, rgba(255,250,236,.50), transparent 44%)
4	右侧一朵暖散景（有体积感）	radial-gradient(circle 120px at 88% 30%, rgba(255,252,240,.42), transparent 75%)
5	人物脚下的地面光斑（把她"钉"在地上）	radial-gradient(ellipse 560px 170px at 28% 94%, rgba(255,248,228,.80), transparent 72%)
6	底部轻压深（下沿不飘）	linear-gradient(0deg, rgba(110,128,156,.10), transparent 24%)

经验：

• 亮度差 3~9 级刚好能看出"有光"又不像打了聚光灯；超过 15 级就会读成一块脏。
• 白色散景压在已经压白的场景上等于没做（实测差异 0.14 级，肉眼不可见）——要提亮就得先有暗部， 所以真正起作用的是"压深 + 暖色光斑"的组合，不是加白。
• 所有槽位必须是单张图，不能在一个槽位里塞逗号列表（会让层数与 size/position 错位）。
• 8bit 渐变要检查阶梯：横向扫描线的相邻像素差应 ≤2~3；本次实测 max 4，无可见色阶。

素材清单

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

文件	用途	尺寸	体积
chibi/window.webp	当前使用：侧后方视角、双手背在身后望向箱内，压白 16%	135×460	13KB
chibi/wave.webp	备用：正面挥手	324×620	27KB
chibi/cheer.webp	双手欢呼	354×620	27KB
chibi/think.webp	托腮	283×620	26KB
chibi/doze.webp	打瞌睡	274×620	26KB
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/window.webp	WorkBuddy ImageGen 生成（文生图 → image-to-image 转平涂），再抠白底
chibi/wave.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。

当前人像（window.webp）的两步做法

正面立绘站在空教室里像贴纸（无环境、直视访客、饱和度高）。改成侧后方视角 + 二次转平涂：

1. 文生图先出姿势与角色：flat vector chibi, three-quarter back view, hands clasped behind back, short silver-grey bob, grey wolf ears, pale aqua fish-shaped halo, teal scarf, navy blazer, grey pleated skirt, black and teal sneakers（第一版带了教室窗框，背景处理不掉）；
2. 再把这张图扔回 image-to-image（input_fidelity: high）转成"纯色块、无描边、去掉窗框与场景， 纯白背景"，这样既保住姿势，又能拿到和立绘一致的平涂风格；
3. 抠白底后把 RGB 压白 16%（v*(1-k)+255*k，alpha 不动）——场景本身压白 38%， 人像不压白就是全页对比度最高的一块，必然"突兀"；
4. 裁 bbox、缩到高 460，WebP q86（约 13KB）。

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

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

替换 / 扩素材

1. 加姿态：按上面的提示词骨架换动作句生成，白底 → 抠图 → 存 chibi/<name>.webp（高 620）， 再塞进 shiroko.css 的 --tb-deco（记得保持 6 个值，并按上面的摆位原则定位）。 换 <img> 时别忘了给 URL 带 ?v=——图片不走 StaticVersion 缓存键，max-age 是 1 天。
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。