Production-ready theme architecture
A reference Next.js implementation for theme switching. Uses CSS variables, class-based theming, and View Transitions to avoid flicker, hydration issues, and inconsistent UI states.
Under the hood
We use the View Transitions API to capture old/new UI snapshots, then reveal the new theme using a circular clip-path expanding from the toggle button.
Capture view
The browser snapshots the current UI before the theme updates.
Switch theme
next-themes updates the class + CSS variables for the new theme.
Reveal smoothly
A clip-path circle expands from the toggle button to cover the screen.
Why use this template?
Production-ready
Clean layout, tokens, and sensible defaults.
Responsive
Mobile-first sections that scale nicely.
Dark mode perfected
No flicker, smooth transition, system support.
Type-safe
TypeScript-friendly patterns and structure.
shadcn/ui
Robust components with Tailwind tokens.
View transitions
Premium switching animation built-in.