> ## Documentation Index > Fetch the complete documentation index at: https://docs.streamly.watch/llms.txt > Use this file to discover all available pages before exploring further. # Themes & Skins > How Streamly storefront themes work — packages, templateEntry, pageShell, CSS isolation, capabilities, and preview. Themes are **packages** under `themes//`, not separate apps. Buyers switch looks from `/admin/themes` without forking routes. ## Package shape ``` themes// 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 `` | 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= ``` * 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 ## Related * [Brand Presets](/viewer/brand-presets) * [Themes (admin)](/admin-dashboard/themes) * [Themes Package System](/technical/themes-package-system) * [Themes Branding FAQ](/faq/themes-branding-faq)