Patterns

Guides for each quadrant of the usage matrix.

SSR + Static

Next.js with bundled themes (light/dark mode)

Server reads the user’s preference from a cookie and renders with the correct data-theme attribute. No flash.

Next.js with themes from a database or API

Server detects the tenant and fetches their theme. Each customer sees their own branding instantly.

React SPA with bundled themes (light/dark mode)

Themes are bundled in your code. An init script runs before React to prevent flash.

React SPA with themes from an API

Client fetches themes at runtime. Brief loading state while theme loads.

Pattern	Package(s)	Key API
SSR + Static	`@livery/core`	`toCssStringAll()`, `data-theme`
SSR + Dynamic	`@livery/core` + `@livery/react`	`createResolver()`, `toCssString()`
CSR + Static	`@livery/core` + `@livery/react`	`createStaticThemeProvider()`, `getThemeInitScript()`
CSR + Dynamic	`@livery/core` + `@livery/react`	`createDynamicThemeProvider()`, `createResolver()`