Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Apply a Next.js dark mode with no flicker or flash. This will allow your users to toggle between light and dark mode on your website. Learn how I applied a light and dark mode toggle to my Next.js & Tailwind CSS blog.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Source Code & Article: www.davegray.codes/posts/ligh...
Next.js Dark Mode with No Flicker + Tailwind CSS
(00:00) Intro
(00:11) Welcome
(00:35) Why This is Challenging in Next.js
(01:29) Tailwind Config
(01:42) Install next-themes
(02:02) Create a providers file
(03:04) Add Providers to your layout
(03:55) Using a Provider in Next.js
(05:07) suppressHydrationWarning
(06:19) Create a Theme Switcher component
(08:21) Wrap up
📚 Tutorial References:
🔗 Next.js: nextjs.org/
🔗 Tailwind CSS: tailwindcss.com/
🔗 next-themes: github.com/pacocoursey/next-t...
🔗 React docs suppressHydrationWarning: react.dev/reference/react-dom...
🔗 Next.js docs "Using Context Providers:" nextjs.org/docs/app/building-...
Was this tutorial about applying a dark mode toggle to your Next.js website helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #dark #mode
Негізгі бет Next.js Dark Mode with No Flicker + Tailwind CSS
Пікірлер: 111