Dark & Light Mode Toggle in Next.js with Next-Themes & Shadcn UI

Dark & Light Mode Toggle in Next.js with Next-Themes & Shadcn UI

T
Thapa Technical
1 Video View·Aug 27, 2025

Learn how to add a professional Dark & Light Mode Toggle in Next.js using the Next-Themes package. In this step-by-step guide, you’ll understand how to create a ThemeProvider, wrap it in a global layout, build a Mode Toggle dropdown component, and even apply your own custom CSS tokens and colors.

This tutorial is perfect if you want to:
✅ Add dark mode to your Next.js project
✅ Customize your theme with global styles & tokens
✅ Understand how to use useTheme with Next-Themes
✅ Build a modern UI with dropdown theme switching

By the end, you’ll be able to fully control your Next.js theme with both built-in and custom styles.
------------------------------------------------------------------------
🚀 Boost Your Skills with these Pre-Requisite Videos:

🔗 Best HTML Course - https://youtu.be/5ccq_nLHneE
🔗 Best CSS Course - https://youtu.be/MSICFljRcb4
🔗 JavaScript Basics Course Part 1 - https://youtu.be/13gLB6hDHR8
🔗 JavaScript Advanced Course Part 2 - https://youtu.be/YwsOCN8woA8

------------------------------------------------------------------------
💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html

------------------------------------------------------------------------
✌️ Join Us!

🚀 Become a Member: Unlock perks, free source code, and more Join Now : https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join
📷 Connect on Instagram: https://www.instagram.com/thapatechnical
🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link: https://discord.gg/MdScmCsua6

------------------------------------------------------------------------
📍 Timeline (Chapters)

0:00 – Dark & Light mode toggle in Next.js with Next-Themes
1:30 – About my Full Stack Development Course
1:50 – Understanding & adding Next-Themes in a Next.js project
3:30 – Creating a custom ThemeProvider
5:45 – Wrapping layout with ThemeProvider
7:20 – Creating ModeToggle component with dropdown
9:20 – Explaining dropdown & useTheme in Next.js
10:10 – Adding global themes & custom token theme
11:30 – Fixing issues with custom CSS styles
12:45 – Live CSS Classes announcement
13:00 – Adding custom colors in global.css
15:20 – Applying new custom className
16:40 – Next.js playlist for more learning