Context
Repo Squad exports currently support two themes, floodlight (dark, green accents) and grass (green pitch,
gold accents) — defined in two places that must stay in sync by hand (see Findings in
docs/exports.md):
The ask: add a third theme, "chalkboard" — a tactics-board look (dark board background, white/chalk-colored
pitch lines and text, like a coach's whiteboard diagram) as a third selectable option everywhere floodlight/
grass are selectable today.
Files involved
app/api/og/_shared/squadTheme.ts — add a chalkboard entry to SquadThemeName and SQUAD_THEMES.
lib/svg-squad/render.ts — add the matching case to palette().
components/squad/SquadExportPanel.tsx — THEME_META record and the theme selector UI (Theme type,
currently "floodlight" | "grass").
app/api/og/squad/[owner]/[repo]/route.tsx and app/api/svg/squad/[owner]/[repo]/route.ts —
parseTheme()/theme query parsing (currently value === "grass" ? "grass" : "floodlight" — needs a third branch).
Acceptance criteria
Notes
Reuse mowStripes() in squadTheme.ts if the board look benefits from a subtle texture — but a flat background is
also a perfectly fine v1.
Context
Repo Squad exports currently support two themes,
floodlight(dark, green accents) andgrass(green pitch,gold accents) — defined in two places that must stay in sync by hand (see Findings in
docs/exports.md):app/api/og/_shared/squadTheme.ts(SQUAD_THEMES, used by the SatoriPNG routes).
palette()inlib/svg-squad/render.ts(used by the hand-built SVG route).The ask: add a third theme, "chalkboard" — a tactics-board look (dark board background, white/chalk-colored
pitch lines and text, like a coach's whiteboard diagram) as a third selectable option everywhere
floodlight/grassare selectable today.Files involved
app/api/og/_shared/squadTheme.ts— add achalkboardentry toSquadThemeNameandSQUAD_THEMES.lib/svg-squad/render.ts— add the matching case topalette().components/squad/SquadExportPanel.tsx—THEME_METArecord and the theme selector UI (Themetype,currently
"floodlight" | "grass").app/api/og/squad/[owner]/[repo]/route.tsxandapp/api/svg/squad/[owner]/[repo]/route.ts—parseTheme()/theme query parsing (currentlyvalue === "grass" ? "grass" : "floodlight"— needs a third branch).Acceptance criteria
?theme=chalkboardworks on both the PNG route (/api/og/squad/...) and the SVG route(
/api/svg/squad/...), producing a visually coherent "coach's blackboard" look on both.SquadExportPanel's theme pills, alongside Floodlight/Grass.floodlight) on an unrecognized?theme=value, same as today.the tall portrait pitch can still clip/clash on the short 630px landscape header (see the sizing constants'
comments in the OG route for why landscape is the tight case).
Notes
Reuse
mowStripes()insquadTheme.tsif the board look benefits from a subtle texture — but a flat background isalso a perfectly fine v1.