Dark Theme in NextJs 13 – Using React Context in Server Components

In this video, we'll look at adding a dark/light theme to NextJs 13 using the `next-themes` package. We'll also learn how to use React context in Server components.

UPDATE: Manually adding the `class` and `style` attributes might not resolve the hydration mismatch problem in some cases. I've updated the source code to use the `suppressHydrationWarning` prop from React instead.

👉🏼 The Ultimate NextJs Course

👉🏼 Source code (Github)

👉🏼 next-themes package

Chapters
0:00 Intro
0:20 Project setup
3:00 Adding next-themes
4:00 Using React context
6:15 Adding a header
8:00 Using Tailwind dark variant
11:00 Adding Theme toggle button
13:20 Adding HeroIcons
14:20 Resolve hydration mismatch
15:30 Resolve extra attribute warning
18:52 Outro

[outthereactive]

many thanks - have been trying (and failing) to get context to work with v13 all day. This is so great - thank you

[giovannitonussi]

Another great video with very recent NextJs features.

[matheusteixeira]

Thank, man! Very useful tutorial. Did this and worked perfectly for me! Cheers from Brazil

[huseyincancirkin]

i cant explain how this video helpful. thank you mate!

[Wahab]

very helpful and easy explanation thanks

[Shawn-Mosher]

Just implimented this last week! Good to know I did it correctly. Great video as always and you are appreciated

[yantaosong]

really appreciate it, I met the same problem .

[mahdikoohneshin]

Is this package keep the user selection in the browser like localstorage for the next reload? And if it's so in the first mounting we have the default theme in the server like light and if in the browser it has a variable saying hey use the dark one so we see that light page for a second then when js has loaded on the browser the theme will have changed! (( a really bad problem ))

[nifijoy]

Hi. can we use a lottie to switch the theme from dark to light and back on clicking the lottie. Can u help me

[stevenrome]

Hi, Great video!
When I use 'use client' for the ThemeProvider the children all become "client components"?

[qxbcdzp]

Great materials and explanation, very useful 👍

[DavisonIncorp]

Is it still server side rendered then if we're wrapping the app in the Providers which is a use client component? Did we just lose server side rendering on the app? Sorry, still new to this.

[contact]

Great video. Do you know how we should pass the children in the ThemeProvider on a tsx file?

[aayush_]

Hi Hamed,
I've been following your videos . I am planning to work on an ecommerce project where there will be multiple frontends for client side, admin panel, probably mobile app and so on. previously i used to do such projects using rest api. but since next js is itself a fullstack framework and if i use it for client side, how am i supposed to design my entire project which includes other frontend too?

[JIPPOKIKKA]

Do anyone have same problem in rendering. When I put Dark Mode and refresh then the light mode turn on and dark mode turn after that rendering. So this flashing. Do I need to save that value in Cookies?

[Grishopping]

Thank you Brother... att. Jose Grillo - Venezuela

[hist-geo]

thank you for sharing i appreciate your help, can you plz explain how we can switch the svg logo color when the theme is changed ?

[luqmanusman]

Hi, how can I use multiple themes like light, dark, custom1, custom2 with different color schemes. As you specified only two themes i.e. light and dark only, thanks

[AMIN_AI-lugn]

its ok i can enable it and get this butto wor switch between dark&light but when i want to use dark: for dark them style it dont work

[qat]

In the first solution, the error remains when you change to dark mode and then reload the page.