Themes & Skins - Streamly

Themes are packages under themes/<id>/, not separate apps. Buyers switch looks from /admin/themes without forking routes.

Package shape

themes/<id>/
  theme.json      # id, name, capabilities, templateEntry
  config.ts       # default branding seed + gallery copy
  skin.ts         # page-shell / button chrome tokens (no React)
  index.ts
  *Template.tsx   # home template (unique per theme)

Shared nav/footer chrome stays in components/landing/templates/ until a later phase. Compatibility shims re-export packages:

StreamlyTemplate.tsx
StreamlixTemplate.tsx
OneTubeTemplate.tsx → StreamTube package (shim name only)

Skin pipeline

Step	Mechanism
Template	`templateEntry` → registry → home `*Template.tsx`
Provider	`StorefrontThemeProvider` in Viewer/Landing shells
Client UI	`useStorefrontTheme().variant` (default `streamly`)
Tokens	`getStorefrontSkin(templateEntry)` → `pageShell`, gutter, `buttonChrome`, `sharp`
HTML chrome	`data-storefront-theme` on `<html>`

Homes stay unique templates. Browse / detail / account share logic + theme skins — do not duplicate page files per theme.

Built-in character

Theme	`pageShell`	`buttonChrome`	`sharp`	Capabilities
Streamly	Centered `max-w-7xl`	`bevel`	`false`	Features section; final default
Streamlix	Full-bleed nav gutter	`flat`	`true`	Cinema orange accent; CSS scoped to Streamlix data attr
StreamTube	Same shell as Streamly today	`bevel`	`false`	`supportsLightMode`

Preview

/?__theme_preview=<themeId>

Operator session required
In-memory merge of preset/seed — not Apply
Must flip data-storefront-theme so preview chrome matches the previewed theme
Floating banner links back to Themes