Next.js Multiple Themes Tutorial | Light, Dark, and Neon Mode (with Next.js, Tailwind, TypeScript)
Connect with me on LinkedIn: / khurram-ali1
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/giraffer...
Github Repo: https://github.com/giraffereactor/yt-...
Welcome to a tutorial on multiple themes in next.js.
🚀 Tutorial Highlights:
Creating light, dark, and neon modes with Tailwind CSS
Storing the theme in local storage for persistent user preferences
Creating a custom React hook for theme management
Preventing theme flicker during website loading
Technologies Covered (all 100% free services):
🚀 Next.js + TypeScript
💨 Tailwind
📚 TypeScript
🕓 Timestamps:
00:00:00 - Demo
01:00 - PART 1: Setting up multiple themes
21:15 - PART 2: Creating a custom hook to save theme in local storage
29:35 - PART 3: Removing flicker on page load with next-themes
🔗 References:
Add Variants in Tailwindcss - https://tailwindcss.com/docs/plugins#...
next-themes - https://github.com/pacocoursey/next-t...
Check out my Poetry Book: https://a.co/d/54CDa0u
#NextJS #TypeScript #TailwindCSS #typescript #themes #react #hooks