Next.js 14: Themed TypeScript App with Light & Dark Mode | Tutorial

what's up Clarity coders in today's video I'm going to show you how you can create a nextjs app this is nextjs 14 and get a light mode dark mode theming all running in under 10 minutes I hope I haven't time this so the first thing we're going to do is open up a new terminal and create our project so I'm going to CD into my projects directory that's where I want to create it and then I'm going to do MPX create next app at 14.1 .0 if you're following along use the same version as I'm using you can use at latest it's probably fine while we're in nextjs 14 but if you have any issues try and use the exact same version we can call this dark mode we'll use typescript we'll use Zs lint we'll use Tailwind CSS we won't use a source directory use the app router we don't want to customize our default aliases now this obviously assumes that you have nodejs installed that's how we use that MPX command if you don't install nodejs first while this is installing I'm also going to reference one extension here if you're not using it I recommend it for boilerplate it's es7 plus react redex react native Snippets and it's from DS ZN ajde R now that we have that installed navigate to that folder wherever you installed it and let's open it up so I went into my folder structure here and we'll open folder and I'll see you once you have it open now once you have it open you should have a structure that looks something like this we're going to edit some code here but I'm going to open up a new terminal and we're going to use one other Library the library that I've been playing around with a lot is shad C nuui let's check that out so what's cool about Shad ceni is it's allowing you to build your own component library from their components so you're not going to do an mpm install and manage a bunch of packages you can actually import the components directly into your code and then work with them manipulate them however you want so let's head over to ui. Shad cn.com hit the docs and we'll hit installation and we'll choose nextjs now the first is going to show you how to install and create your nextjs project we've already done that let's install Shad CN UI so I'm going to grab the second command npm and back in our code I'm going to paste that into our terminal now we'll go through some prompts here we'll just use most of the defaults I think so we'll use default slate do you want to use variable names for colors yes we have the structure now to do theming so let's take a quick look at the app folder and then our Global CSS now here you'll see that they've defined some colors for us you'll see background foreground card card foreground and if you slide down you also see that they've implemented a dark mode as well I'll close out of this so we can see it better so you can see all the different variables that you that you have available to you here so the first thing we can do is back on Shad CN UI we can go back to themes and here we can pick out one we like so let's say we like this red one here we can do copy code you can also do customize and pick from a larger list here if You' like so I'm going to hit copy code and then you'll see this is the at layer base so it's that same code that we were checking out this is just for that red theme that I picked out so I'm going to hit copy here now back in our code I will scroll up so we want to grab that at layer base copy all the way to the bottom we don't want to remove this at layer base below however so we should have something that looks like that and we'll paste in our new code so now we should have the new style that we want to use in our application now if we go back to the docs here we we can click on dark mode and we can select nextjs now one of the things that we have to do is wrap our entire application with a theme provider and that's going to use client so we're going to separate it into a new component so let's copy this code and then back in our code here in my components folder I can create a new file and I can call it theme- provider. TSX and I can paste in that code we borrowed and you can see that it's a little mad at me it needs next themes so let's open up a new terminal we were going to do that anyways and it actually covers that in the documentation I skipped that step so we can install next themes so let's paste that in here that should take care of our issues there which it did and now we can go back to our layout. TSX and here we can wrap our entire application so I'm going to go inside the body here with theme tags from that component they have an example one here we can steal that so I'm going to copy this theme provider tag and I'll paste it after our body tag and then right here after that children I can close that theme provider tag and here a little trick if you click in here and hit control dot we can add an import we don't want the import from next themes so we can add the import from at components theme provider and that looks good so let's contrl s now if you're wondering how I'm formatting so quickly like this this is called prettier it's another extension you can use and that I use religiously to clean up my code now I don't want the default theme to be a system choice I want to say I want the default theme to be dark I prefer dark themes so we'll set that if you would like and then from here let's open up our page component this has a bunch of nonsense in it let's delete it out if you're using that react code snippet extension you can do rafc and here this will create you some boiler plate and I'll do dashboard for my page now you can also just type this out just a little cheat I do to make it a little quicker here and now if we do mpm runev and start our server then we can navigate to our new fancy application and as you can see we're at least in dark mode uh we can't switch or anything like that but we got a cool blank application here and it is themed even though it doesn't look like it so here for example I can do p tags paste that around here I can do class name and then using Tailwind I can do text- primary to set the color and if I go back you'll notice it's taken our theme color there but first I have an exciting new course out that I want to show you and get to you for cheap or free now if you like this tutorial and you want to take it to the next level LEL and build totally custom applications from start to finish I have a brand new ticketing tutorial on you to me that you can check out right now if you click the link above we have a discounted version for $13 that will walk you through the entire process and one thing I want to do for my listeners on YouTube is to ensure that if you can't afford that price you have a free way to view the tutorial as well so check out the website log in and I have a, the first thousand get free access to this tutorial it's over 6 hours it involves everything from serers side page Nation authentication Tailwind CSS Shad C nuui everything you need to start creating your own applications check it out let me know what you think okay so our theming is working I don't really want that so I'm going to delete that out contrl s inside our components directory let's make a new file called nav.png so we can have items center after it let's have a border on the bottom and a margin bottom of five let's say we want padding of five as well and our background to be secondary color okay so then here for this div we can say our class name is flex and we want to justify between our items I don't want it to be the full screen if you're on a huge monitor so the max size the max width I want it to be is 6xl but I want it to be the full width otherwise now inside of here we can have two sets of divs the first divs can be our navigation menu and then the second can be log out log in dark mode that sort of thing we're not going to do all that but I'll show you here so let's start typing a link tag and we can slide down and tab on this the next link one and you'll see it does our Auto Import now links have to have an href so here we can just set it to go to our root page and here we can set dashboard as a link and these are going to be kind of bogus links for right now but I will paste paste we'll do users and tickets and then let's copy a couple of these and we we can say down here we want this to be log in and this can be our toggle for light to dark delete that extra one all right that's looking good let's get it in our project so on the layout tab back on the layout tab let's add this nav to every page so we want to add it here so I'm going to start typing nav my Auto Import is going to be from at components nav this is what it looks like if your intellisense doesn't work we can close that tag and now if we go back to our project you'll see it's really not pretty but you'll see our different background color up here and all of our links are mushed together so back in our code let's quickly I don't know where I'm at in time I got I got to be going over items Center for this and let's do a gap of five and let's copy this to our other set here as well quick look oh much better so that all looks good now what if we want to do a little styling along with our theme I know I'm adding more I'm feature creep right now so let's go Global CSS say we want a hover effect for all of our a tags we can add an a here and we can say add apply let's say we want a hover and the text to be primary like that so now if we go back all of our links should have a nice hover effect I don't know if I'd call it nice but they have a hover effect all right let's get to the bread and butter of what we wanted to do here now our nav right now is a server rendered page you'll see how we're not saying use client we need our toggle mode to be client side so I'm going to create a new component called toggle mode. TSX in this component we can do rafc and at the top the one difference we want to do is we need to use client for this component now let's kill this terminal and from Shad cnii we also want to use the button component so you see we have a nice cute little button here it's easy to use let's copy this that's the MPX Shaden UI at latest add button and I'll show you how this component Library works it's really great there's no way this is under 10 minutes so you'll see it creates a UI folder here and the button code now this component is is now part of your component Library so they want you to be able to manipulate it and use it how you would like you can see the code how it works and you can even use this to set up your own buttons down the road so we're going to use this in our toggle mode to create a moon and a light button so we need to keep track of some state so here we're going to get react we can also get use State and use effect you actually don't have to import react so you don't really have to do that but we're also going to import use theme and this is from next themes so I'm going to tab there watch out for that extra curly bracket we're going to import Moon and Sun from Lucid D react this is either part of the themes that we installed or part of Shad CNU I can't remember but we're going to use those icons and then we'll import button from slui SL button so we're just importing our own component there this should be a capital B actually now inside our toggle mode we need to get our themee and we need to be able to set theme and that's from use theme okay so this is going to tell us what our current theme is and this is going to allow us to change our theme now we also need to keep track of whether our component is Mount mounted or not that's because we need to know if it's mounted so we can determine what the what the current theme is and these should actually be square brackets I apologize for that this is going to be our state so we'll throw those square brackets that looks better got rid of our air then all we need to do is use effect to determine if this is mounted or not once this runs then we'll know set mounted can be true so if it's not mounted let's just return a button where the variant equals now if you look at the variant in typescript we'll give you all the types so you don't have to look through it but you can see that there's options for default destructive ghost buttons link outline or secondary now we're using secondary as a background color so I'm going to use secondary here you can play around with those choices let's set the size equal to Icon disabled equal to True right because our component's not mounted yet so we don't want them to actually click on it and we can just leave it like this it'll just be a blank button so that's if it's not mounted and that's because if it's not mounted I can't tell what our current theme is so then we can say const dark equals let's look at our theme and see if it equals dark okay so we're doing some conditional here so if this is true so if theme does equal dark then our dark variable will be true if it's light or something else dark will be false and now we can simply return our button here so here we can do return button just like that and we're going to have a variant of secondary a size equal to Icon and on click we're going to have an inline function and here we can just say set theme and we can do some conditional rendering here so we're going to use back ticks dollar sign and curly bracket and then we're going to say dark question do something or do something else so if dark is true we want to set the theme to light if you push the button if dark is false we want you to set the theme to dark if you push the button awesome so this would function now but we need icons right so let's do some conditional rendering here to decide which icon to display so again we're going to do dark and question mark if it's dark we're going to do something otherwise we'll do something else so if it's dark I want to display our sun icon and if it's not dark I want to display our moon icon so basically it's going to display the opposite of what it's currently set on here we can add just a little bit of styles we can say we want our hover to have a cursor Das pointer so it looks like you can click it and the hover can be text- primary something like that let's copy this and use it for the moon as well paste it here let's do mpm run Dev now we got our server started but we have to actually use this component I didn't do that so let's go back to nav and instead of this toggle link let's delete that out and let's start typing toggle mode I'm going to slide down and then tab for the auto complete on that component and we'll do a self closing tag there this is the import if it didn't do it automatically for you now back in our project you might have to do a hard refresh and you'll see we got our hovers we got our light icon which is good because we are in dark mode and if I push that you'll see we flip over to light mode you'll see our secondary color changes everything still looks good and shows up you'll notice that this changes from White text that you can see to Black text you can see in dark mode that's it that's how we can Implement dark mode light mode and theming in NEX js14 using Shad CN UI until next time keep coding

Channel: ClarityCoders

Views: 605

Keywords: Next.js 14, TypeScript app, light mode, dark mode, Shadcn UI, Tailwind CSS, Next.js tutorial

Id: 0oqYwZi4igc

Length: 19min 16sec (1156 seconds)

Published: Thu Feb 15 2024