Walkthrough

Adds client-side theming to the Next.js text-to-speech app: a ThemeProvider component that manages light/dark state (persisted to localStorage and responsive to system preferences), a ThemeToggle button component, wraps the root layout with the provider, updates the page to include the toggle in the header and reduces vertical padding, and extends globals.css with a custom dark variant plus global transition and reduced-motion rules.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• ThemeProvider.tsx: review initialization, localStorage usage, system preference listener, DOM class and color-scheme updates, and SSR guards.
• ThemeToggle.tsx: verify mounted-state handling to avoid hydration mismatches and correct toggle behavior/ARIA.
• globals.css: validate custom variant syntax and the added global transition and reduced-motion rules.
• layout.tsx and page.tsx: confirm provider wrapper placement and the header toggle integration do not introduce layout shifts or import path issues.

Pre-merge checks and finishing touches

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Approved.

Design nitpick, there seems to be slign animation when switching modes. Lets try to find quick fix, if complex, good enough.

Transition is now applied consistently everywhere