Dark Mode in Next JS 13 App Directory with TailwindCSS (for beginners)

Integrify Academy - study and land a job in tech!

Github repos from the video

My courses:

💻 MY GEAR

Connect with me:

00:00 What this video is about
00:25 Setting up the example project
01:48 Adding next-themes library
03:18 Solving client component error
06:08 How to boost your tech skills
07:07 Adding theme changer component
08:45 Solving hydration error
11:35 Adding theme specific css
13:47 Color-scheme css property
16:02 Dark mode with Tailwind CSS
17:29 Add next-themes & theme switcher
19:31 Configure ThemeProvider for Tailwind CSS
20:11 Adding Tailwind style classes

#nextjs #nextjstutorial #darkmode

[ajayrathod]

This video was very informative. I am making my first project in next.js and i was facing issue with theme in it. with your video my all isssue are resolved. Thanks a lot!!

[jooncco]

This was the only one I found explaining within the appDir feature. Thanks a lot !!

[kentoscocos]

thank you for the code example, specifically in your second example repository
i'm writing this to confirm that your method did not result in hydration error in nextjs 15. to make the transition from dark mode to light mode looks smoother and user hopefully not getting shocked from the sudden change of mode, i add "transition-colors" and "ease-in-out" in my root layout

hope this helps!
edit: i forgot to mention that apparently the code example for the "theme-provider" file is already available in next-themes official documentation. looks like i read too fast and probably did not pay more attention 😭😭

[over]

Returning null if !mounted is a bad workaround that will end up causing delays and long loading of certain client components. It essentially "waits" a half second or more, then your component appears. I know it's the the way Vercel says to do it, but still problematic. You can render a dummy component until it's mounted, but that's a huge duplication of effort.

I found that Tailwind themes SOMEhow work better without any hydration error or delay. Not sure how they are getting the the theme value (probably a CSS media query in the background). But it works

And I just typed that all out as I watched the video, not knowing you were going to get to Tailwind and explain that too!

Good video, very helpful.

[toastrecon]

I could be missing something, but wouldn't this essentially make ALL of your components "client components"? I mean, you only need to wrap the components in the theme provider that you want to change when you went from light to dark mode, but that would theoretically be any and all that were visible, right?

[tube-rpnb]

thanks man. i have been trying for three days.this was helpfull

[wadethomas]

Thanks for this video I really appreciate it. This is the only one I found that implemented light and dark mode with the new app structure.

[facuflooo]

Thanks you saved me some time with hidratation failing.

[wassu]

I loved sir your best teacher teaching to everyone ❤

[alexakten]

legend, solved my problem! liked and subscribed!

[anonymousnoob]

Thank you so Much! Saved me a ton lot of time.

[kacperkowalski]

My issue has been resolved by you :), nice video

[nemeziz_prime]

Can you share info about your VS Code Themes and Extensions setup? Looks pretty cool

[z_]

Amazing, thanks a lot! At 4:52, how did you wrap automatically in vs code?

[sellimenes]

There is not many videos about dark mode with App dir. Thank you for your effort and information! But, on this configuration, when a refresh the page, it blinks from light mode to dark mode. And if course, it's not a good user experience. Do you have any ideas?

[kasieugwu]

Thanks for the class. Next/image does not work after the page refresh in next themes

[fearne]

Hi that's a great tutorial, can you tell me why when dark mode is selected and I navigate to another page it reverts to light mode and then back to dark again? Is this how this is supposed to work?

[mmddev]

Thanks for the clear and great content 💖

[MrKeliv]

This tutorial is very usefull. Thank you

[ryanhenrique]

Great video, but I have a question, the themeSwitcher works perfectly locally, but I deployed the application on vercel and my themeSwitcher is simply not rendered, what could be happening? help me