Recipes

Task-Oriented Patterns

Copy-paste patterns for common theming tasks. Each recipe is a self-contained solution you can adapt to your project.

Prevent the flash of unstyled content by resolving the theme on the server and embedding it in the initial render.

Save the user's theme preference across page reloads and browser sessions using localStorage or cookies.

Respect the user's OS-level dark/light preference and update automatically when it changes.

Animate theme switches with customizable duration, easing, and presets for smooth visual experience.

Synchronize theme changes across multiple browser tabs and windows using BroadcastChannel and storage events.

Overlay themed scrollbars that track the active theme with smooth transitions and touch-friendly interactions.

Apply a different theme to a specific subtree (like a dashboard panel) while keeping the rest of the app in its default theme.

Generate color palettes that meet WCAG contrast requirements using Themvora's contrast validation.

Use the Themvora CLI to generate complete theme families from seed colors in your build pipeline.