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

in today's video we will take a look on how to add dark and light mode to your next chess application we will first see how to add a theme changer to your application and then how to display or manipulate the CSS based on the selected theme and then we will also take a look on how we can utilize this steam changer with Tailwind CSS so let's get started so first I will create the new next test application with create next app and I will choose no no for typescript no for eslint no for tail with CSS for now no for SRC then we will want to use the app router so yes and for this no and let's wait for it to run okay great let's open it up in vs code like this and I will just fire up the dev server to see that everything is working let's open the browser go to the localhost 3000 and let's see the application okay looks like everything is okay so just to make everything really clear I will create a very basic example of the changing of the theme so what I'm going to do is open up the app folder then from there the page.js and I will actually clean everything from this page.js file like this and then I will just return a div with a paragraph saying hello world like this and I can remove these from up here and let's save it and switch to the browser and looks like we are getting the hello world text okay good so in order for us to change the theme and get the current theme we will use this next themes npm package so let's go and install it I will copy this from here go to DBS code stop the server and paste in the yarn at command like this so now we have the library at so I'm gonna yarn dip again so we get our Dev server back on and see in the browser that it's working looks like everything is okay great so let's switch back to the vs code and over here I will open up the layout file so with app directory this is the layout file and from here I'm just gonna delete this font stuff and then also from down here like this because we don't need those right now and then also open up the global.css file and just remove everything from here too so that's the file that we are importing up here okay so in order for us to add the theming for this application we need to import a theme Provider from next themes so let's do that like this and then we need to wrap our content down here inside of the theme provider so let's do that like this so let's save it and check out the browser so looks like we are getting an error saying that create context only works in client components and this is because our layout JS is now a server component and if we wanted to use this as a client component we would need to add this use client directive at the top of the file over here but that's something we don't want to do at the moment we want to keep it as a server component because there is another way to add this theme provider over here without converting this to a client component so let's see how that's done so what I'm going to do is actually add a new file to our app folder called providers.js like this and over here I will import the theme provider so I will copy it from the layout and remove it from there and then I will actually just return a component from here like this and right now I'm just returning the children in a div but what we actually want to do is to wrap these children in a theme provider so over here I will replace this div with theme provider like this and now if I go to the layout.js I can get rid of this theme provider over here and what I want to do is import that provider's component we just created so let's do that like that and then let's wrap this children inside of that provider component I like this let's save it and see if we still get an error so looks like we are getting an error it's the same error and actually this is because our providers component is also a server component because we are not defining this as a client component so remember that with app directory all the components are by default server components if we don't Define them as client components so in order for this to work let's make this client component like this so now our provider.js is a client component and we are wrapping the children inside of it and that way adding the theme provider for our application so let's save everything and switch to the browser and looks like we are getting a hello world so we got rid of all those errors okay so right now our text is black and the background is white and what we want to do is be able to change the theme so all this changes so the next step is to create a theme changer or this kind of switch or drop down that we can select the theme that we want to use so let's do that next but before we do that I just want to quickly tell you about the sponsor of this week's episode in Tech refine because if you are looking to learn on demand Tech skills you should definitely check out integrify Academy it's a coding Academy operating across Europe and offering full stack development as well as data science and machine learning programs online in Finland Sweden Denmark Germany and the Netherlands they have trained more than thousand students since 2016 and organized dozens of programs you not only get a boost on your technical skills in web development or data science but also provide one-on-one career coaching Services CV and cover letter reviews and a lot more so if you are looking to level up your skills and boost your career in Tech check out integrify Academy today I will leave a link down into the description I will go to the BS code and I'll create a new component inside of our app folder called theme switcher and let me just add some code over here and let's then go through it together okay so first in order to change the theme we need to import the use team Hook from the next themes and then over here we are just defining our theme switcher component and then using the use dim hook to get the current theme and also to change the theme and then we render the current theme just as a text and then button for setting the light mode and dark mode so when clicked we are just calling the set theme function and passing in the theme as a parameter so this should be everything we need so let's save this and go to the layout.js file and I want to add this to the top of the page so we can see it on every page so let's first import it like this and then we can render it down here like this let's save it and switch to the browser to see if it works okay we get the client component error so we forgot to make this a client component so let's do that like this so let's save it and switch to the browser and let's see what we get okay so we get the current theme over here and the light mode and dark mode buttons but it looks like we have a couple of Errors so let's tackle those right now so we are getting an error hydration fail because the initial UI does not match what was rendered on the server so this error is actually because the theme is only known on the client side on the browser and when rendered on the server we don't know what the theme is so some of the values for the use team hook for example are undefined so we are getting this hydration error because of that and in order to fix this we can do this one thing that they actually mentioned in the npm page of the next themes over this avoid hydration mix mismatch section so the idea here is that if we scroll down a little bit over here they have a version of the theme switcher so what we can do is render the UI that uses the current theme only when the page is mounted on the client side we can do it like the list over here so let's add this to our application so what I'm gonna do first is go to the vs code and open our theme Switcher and up here I will import the use date and use effect hooks like this then inside the component I will create a piece of State called mounted like this and it will default the false and then before the rendering part I will just add if statement checking that if it's not mounted return nor and also we want to add a use effect in which we set the set mounted to True like this and then the let's add the dependency error like this save it so right now when this component is mounted on the client side this use effect will be called and the set mounted set to true and then after that this part will be rendered and because we are on the client side we will know the theme already so it should work so this was the team switcher so one other place we need to add this same kind of logic is the providers so let me just do that and let's continue from there like this and one difference between this and the theme switcher one is that now when the component is not mounted instead of returning a null we will return the children wrapped with react fragments so this is the shorthand for react fragments okay let's save this and switch to the browser and see if we get anything in here so I'll refresh the page and looks like the errors disappeared and we no longer get any warnings down here either okay great so now it's time to do some styling so I will open up the globals.css file and in here I will add some CSS to style our light mode and dark mode so let's start with the light mode so I will just modify the body element for this example so let's do a simple one select color to set it black and the background color set it to Y like this so let's add some styles for the dark mode too and how we can do that is by targeting the data theme and checking if that is dark and I will select the body also and here let's say we want to set the background color do black and color to white so the opposite ones for the light mode let's save this and switch the browser and see what happens so now we are on the light team currently so let's click the dark mode and looks like the background goes to Black and the text stays white and if we got live mode it changes again so looks like our styles are working and the reason why the dark mode works so while we use this kind of syntax when targeting the dark mode Styles is because if we click right here and select inspect and check out the HTML element we can see that it has the data theme attribute with the value of dark and if we click the light mode it will set the theme to light so that's why we can Target the dark mode with this kind of syntax in our CSS and this is the default behavior of the theme provider and we will actually use different kind of behavior when we are using Tailwind CSS and I will show you an example of that in just a minute and one thing I want to mention is that if we take a closer look on this HTML element and when we change the themes we can see that the color scheme is also changing for the style attribute and what this does and actually let me open up a documentation so if you are not familiar with color shim it's a CSS property that allows an element to indicate with which color scheme it can comfortably be rendered in so if we set it to dark it will automatically use these dark values and with light the light values so actually if we change back to our application and go to the vs code and actually if we delete our styles from here and save this I think this should still work so let's refresh the page and right now it's the light mode but now if I go to the dark mode we can see that the dark mode is activated and that's because the color scheme is set to dark also When selecting the dark mode but just for example purposes so how we can Target the different themes I will leave this over here and of course we don't have to use these Styles so let's say we wanted to have the text as red when using the dark mode we can change it up here switch to the browser and the text is displayed red when dark mode and in light mode it will be black so if you need some custom CSS for your elements this might be the way you want to go with but if you just want to add this default dark Behavior you don't even need this CSS over here all you need is to add these providers.js and then use it in your layout.js file like this and of course at the team Twitter and you could make this nicer right now I just made it two buttons to make it easy and simple so this is how you can use the themes to manipulate the basic CSS so next let's see how we can set up this theme changer with Tailwind CSS okay so next let's see how to use this theme changer with Tailwind CSS so what I'm gonna do is actually create a new Fresh next test application with Tailwind CSS so I will stop this server over here and go back to my terminal and right here I will just create a new next test application like this so I will hit enter and for this I don't want to use typescript neither eslint but for Tailwind CSS I will select yes and no for SRC yes for app router and no here and let's wait it to run okay let's open it up in vs code like this and for this also I will just open the page and remove everything from here as we did last time and then just return it if with a text like this and I will also just remove this import from here let's save it next let's start fire the dev server and see that everything is work I will switch to the browser and refresh the page and looks like we are getting the hello world and we are actually getting it as a dark team already and that's because my system theme is dark and this recognizes depth and that way it shows the Dark theme already but next let's add the theme switcher we did earlier so I'm gonna go to the vs code and add the yarn at next themes and now we want to add the provider again so what I'm actually going to do is switch back to the first application and just copy everything from our providers.ts and switch back to the new application with Tailwind CSS and create a providers file like this paste in the code and save it and then for the layout I will switch back to the first application and just copy this whole layout also from here and then back to the new application select everything and paste in the code so now we are still missing the team switcher so let's do the same thing for that so switch to the all application copy the team switcher everything from there and then back to the new application create a new file for that team Switcher and paste in the code like this let's save it and now if we open the dev server and switch to the browser we are getting the hello world and the theme changer up here and it looks a bit nasty but these should be buttons so when clicked we are actually changing the theme as we can see so when we click the light mode the theme will be changed the light and with dark mode it will be changed to dark and let me actually switch back to the PS code and modify the team switcher a bit I will add line breaks over here let's save it see it again so now the current theme is dark with light mode it goes to light dark mode it goes to dark and we can see up here that the data theme is changing as it was earlier but now it's not working because with Tailwind we need to actually use something else so let's go back to the vs code and when using tile wind we need to pass for this team provider a prop called attribute and as a value for that we want to pass in class like this so let's save it and now if we go to the browser let's refresh the page so now when we change between the themes we can see that there is no longer a data theme attribute but there is no class that is changed based on the theme so that's how Tailwind uses it and now we still have everything in Black so let's add some Tailwind styles to style our application so first I'm gonna actually open the global.css and I will remove everything from here except the Tailwind Imports up here so let's save it and let me just see in the browser if anything changes okay so now we are getting the light mode and dark mode when switching the themes and this is now because the color scheme style attribute so we are still not using the Tailwind but bear with me so now that we removed everything from the global CSS let's switch back to the page component so over here we have the hello world so now let's say we wanted to make this text red whenever we are using the dark mode well with Tailwind CSS we can do that with classes so if we want to Target a dark mode style or add a style or add a class when the dark mode is active we can do that by typing in dark colon and then the class we want to add and for this let's add text red 900 like this so now whenever the dark mode is active this class will be applied for this D so let's save it and switch to the browser and we can see that it's now displayed in red since we have the dark mode active so let's switch to the light mode and we can still see actually that the text is red and this is because we still need to add one configuration to our application so right now the text thread 900 class is is applied to this text whether or not the theme is light or dark so in order for us to have this dark theme working with Tailwind CSS we need to still modify the Tailwind config.js over here so let's open that up and inside here we need to add a dark mode attribute and set it to class so what this basically tells to tail with is that the dark mode information will be found from the class of the HTML element so now let's save this and switch back to the browser and what do you know now the text is black so if we switch to the dark mode the text is red and with light mode it's black so that's all you have to do in order to use the darker light mode with Tailwind CSS I really hope you found this video at least somewhat helpful and if you did please let me know by leaving a comment down below and liking the video

Channel: Tuomo Kankaanpää

Views: 24,696

Keywords: nextjs, next.js, dark mode, nextjs 13, nextjs react, nextjs react 18, next js app directory, next js app dir, next js theme, next-themes, light mode, next js 13 theme, next-themes nextjs 13, next-themes tailwind, tailwind, tailwind css, tuomo kankaanpaa, web dev simplified, nextjs tutorial, react

Id: optD7ns4ISQ

Length: 23min 2sec (1382 seconds)

Published: Thu Jun 01 2023