Themes & Skins - Streamly

Themes are packages under themes/<id>/. Buyers switch looks from /admin/themes without forking routes. All three built-ins are Final.

Package shape

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

Shims: StreamlyTemplate, StreamlixTemplate, OneTubeTemplate → StreamTube.

Skin pipeline

Step	Mechanism
Template	`templateEntry` → registry → home template
Provider	`StorefrontThemeProvider`
Tokens	`getStorefrontSkin` → `pageShell`, gutter, `buttonChrome`, `sharp`
HTML chrome	`data-storefront-theme` on `<html>`

Built-in character

Theme	`pageShell`	`buttonChrome`	`sharp`	Notes
Streamly	Centered `max-w-7xl`	`bevel`	`false`	Features section; default
Streamlix	Full-bleed nav gutter	`flat`	`true`	Cinema orange; square CSS scoped
StreamTube	Full-bleed guide gutters	`flat`	`false`	Guide/rail + search; soft 12px; light mode capability

Preview

/?__theme_preview=<themeId> — operator only; in-memory; flips chrome attribute; banner back to Themes.