Preview scoped customer themes
Use CSS variables on a flow wrapper to keep Rhythmic structure, typography, spacing, and component behavior intact while changing tenant colors from a trusted theme ID such as ?theme=blue.
Theme workbench
Switch presets, edit semantic colors, and inspect how real Rhythmic components respond inside a scoped preview.
Implementation notes
The default theme should remain the strongest path. Custom themes should be allowlisted, resolved from a tenant or URL parameter, and applied as variables to the smallest flow root that owns the experience.
Keep customization color-first. Avoid letting tenants change spacing, typography, radius, or component structure unless a product need proves that control is worth the extra QA surface.
Portaled components need the same theme scope. A production provider should render overlays into a themed portal container or copy the active variables onto overlay roots.
URL params should select known theme IDs. Do not accept arbitrary color values directly from public URLs without validation and contrast checks.