🎥 Dynamic Theme Mode and Color in Next.js with Shadcn UI
🌈 Ever wanted to add a theme mode and color toggle to your Next.js app using Shadcn UI? You might have noticed the lack of documentation for changing colors on their website. Fear not, because in this video, I'll guide you through the process step by step!
Watch this next: https://youtu.be/WWwDL9G9xkU?si=BUvVWM4VCmPj78xs
📚 We'll cover:
Installing and setting up Next.js with Shadcn UI
Enabling light and dark mode toggle with next-themes
Utilizing Shadcn UI components like button and select
Adding icons using Lucid React
Configuring Tailwind Prettier plugins
Defining color themes and types
Creating a theme data provider component
Implementing theme mode and color toggles
Adjusting UI components to adapt to color changes
🚀 By the end of this tutorial, you'll have a fully functional Next.js app with dynamic theme mode and color switching capabilities. I'll walk you through the code, explaining each step along the way.
🔧 To make your life easier, I've even included a link to copy the necessary color theme objects, saving you from the tedious task of converting CSS variables manually.
🎨 But wait, there's more! I'll also show you how to make some cool adjustments to the landing page, such as modifying the background glow of the Next.js logo, adding gaps between cards, and changing border colors to match your selected theme.
Useful Links:
themes object: https://ray.so/olriofd
Github repo: https://github.com/TheDevLogger/nextjs-shadcn-ui-theme
Time-codes:
0:22 - install dependencies
0:49 - modify global css
1:00 - define types
1:53 - setup theme provider
3:22 - ui setup
👍 Don't forget to like, subscribe, and leave a comment below if you found this video helpful. Happy coding! 🚀