Dynamic Colors Themes and Modes in Next.js + Shadcn UI (2024)

🎥 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: • Supabase + Next.js ULT...
📚 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: ray.so/olriofd
Github repo: github.com/TheDevLogger/nextj...
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! 🚀

[@rotrixxplays]

Lifesaver

[@rnholykabye9455]

Thank you Sir. Chapeau!

[@StephenRayner]

Top quality, keep going! 🎉 the videos are excellent.

[@Scariot]

Insane content! thank you for the help

[@TheDevLogger]

Thank you for the compliment! I’m glad it was useful to you 😊

[@haashtech]

what if we dont need change color to all elements

[@TheDevLogger]

You can always edit the css that is copied over from shadcn ui themes page. Or you could just define specific color for certain elements on your page using tailwindcss classes, this would make sure the element is always a specific color even if you change theme color. Hope this answers your question!