Add theme switcher for Light, Dark, and System modes

[Muneerali199]

Summary

Add a theme toggle to let users switch between Light, Dark, and System (desktop) modes smoothly using next-themes and lucide-react (for icons).

Tasks

• Install next-themes and lucide-react
• Create a reusable ThemeProvider component using next-themes
• Wrap the application in ThemeProvider within app/layout.tsx
• Create an animated ThemeToggle component (Sun, Moon, Monitor icons)
• Add the ThemeToggle to both the Desktop Navbar and Mobile Navbar menus
• Ensure smooth background transitions during theme switching in app/globals.css

Files to change

• package.json (dependencies added)
• app/layout.tsx (~10 lines changed)
• components/layout/Navbar.tsx (~30 lines changed)
• components/theme-provider.tsx (new, ~20 lines)
• components/theme-toggle.tsx (new, ~65 lines)
• app/globals.css (~10 lines added for transitions)

Acceptance criteria

• Toggling between Light, Dark, and System modes works instantly
• State is persisted in localStorage (handled by next-themes)
• No layout shifts or flash of unstyled content on reload (using suppressHydrationWarning)
• npm run build succeeds