next-themes: handle themes without flashes or hydration pitfalls

next-themes applies the theme as the page loads, respects the system preference, and syncs the choice across tabs. Its ThemeProvider works with both the App Router and pages/, while a hook lets components switch themes or handle multiple variants.

One architectural detail matters: the browser-stored theme is unavailable during server rendering. UI that depends on useTheme should wait until the client component mounts to avoid hydration errors. The library also updates the <html> attribute—suppressHydrationWarning is recommended—and remains independent of the CSS solution in use.