Next js 14 Theming with Daisy UI - Light and Dark Mode

hi guys welcome back to another video in nextjs 14 using App directory in this video I will be using Daisy UI and implementing the theming so in this page you can see that I have this table which is the component from Daisy UI and this is the component from Desy UI as well this is just to elaborate you the how theming works so we can actually Implement more than light and dark mode in this uh Library using the daisy UI so you can see that I can click on the light dark corporate these names are coming from the daisy UI I can click on the Valentine retro aqua and I have set the custom theme as well in this video I'll show you all these configurations how to set all these different theming Daisy UI provide I think 25 plus theming so if we are using the components from the daisy UI all these theming automatically applies to those components all right and if I set any theme if I refresh the page it will stay as it is and this is what I'm managing using the local storage in the context API uh by creating the high order component in nextjs 14 so I will be creating a new nextjs 14 project from scratch and I will start off configuring Desy UI in my project and adding these components and integrating different theming so let's open up the VS code and first of all let me verify the version of node it is 20 so I will be using the npx create next app at latest space dot I don't want to create any another folder so it's going to ask me few questions so I will be hitting why and uh it's going to yes we need typ script es L Tailwind CSS I'm going to go with the source directory and U app router customize no so it's installing and downloading different dependencies so meanwhile it's getting in installed uh I just want to let you guys know that if you check my playlist nextjs 14 tutorials app directory I've created a lot of videos um including the types scripting different uh project building forget reset password authentication authorization feature and I have created a video on nexj 14 theming with Shar CN UI as well you can check that out on this playlist and you can see that I have created complete authorization system using clerk SEO build a Blog application e-commerce web application development and if you check the nexts 13 tutorial app directory you will see all the crash course from Basics to advance including the best practices performance of the web app connecting with the databases Redux toolkit uh context API and all these things it covers pretty much every topic that would need you to become a good nextjs developer using the app directory so you can see I'm putting a lot of effort creating these videos for you guys so it will really encourage me if you subscribe my channel and like this video so I can create more videos for you guys it's still installing it's downloading the different dependencies so let's wait for it all right so project is created let's go to the source folder and inside the app directory I'm going to open up the layout so I'm going to wrap these children first of all I hope that you have some understanding about the app directory how things work if not you can check out my playlist I've created almost 50 videos on nextjs app directory so you can check that out so I'm just going to cut it and put it inside this div and I'm going to add the class name to it MX Auto I just want to make of everything including the nav bar and the children to the center of the page so this is just quick styling for that so I'm going to write the text margin bottom equals to 10 all right and I'm going to open up the page. TSX and I'm going to remove everything within this main okay and uh for now I can just add the home over here just to see on the UI now first of all I'm going to create a new folder and I'm going to name it components and inside it I'm going to create a nav bar. TSX file and uh let's use the snippet RFC and uh inside this nav bar I'm going to style it a bit so this is the div inside this div I'm going to create a UL okay so let's add some class name to it so Flex justify Center uh actually justify between I want to add between the home logo and the sidebar content so pedding top equals to five items Center all right right so inside it what we can do is we can have div and inside this div we can have uh link from next and it require href forward slash okay let's add Li and then the home okay so this is just for formality I'm just going to copy this div and uh I'm going to paste it below so this is going to have a class name because I want to wrap it in the form of row and put the gap of five between each of the buttons so what I'm going to do is I'm going to add different buttons for the light theme for the Dark theme so inside this button let's give it light okay so let's copy let's paste that so for now let's add the doc to it let's add the corporate to it for now all right and I will be adding this Navar over here above the children so that it's visible on all the pages so here I will be importing the Navar like it all right so before moving further let's check that out how it's looking like on the UI so I'm going to go to the browser let's refresh now and uh this is going to load up all right so this is how it's looking it's looking pretty cool we have the home we have the light dark corporate buttons and this is the home coming from the page. DSX so I'm going to open up the global. CSS file and I'm going to remove everything but I will keep these Imports for the Tailwind because these are required for using the daisy UI uh because DIY UI is built upon the Tailwind CSS we can combine the Tailwind CSS and the da UI classes as well so here what I'm going to do is first of all I'm going to install the daisy UI so we can go to the Desy ui.com //in and uh click on the install and this is what we need to install first of all so for now I'm not going to stopping the server in fact I'm going to open up a new terminal within the same directory and I'm going to paste that command npmi and I'll be installing Daisy UI at latest and it will be installed over here all right in the dev dependency you can see it is installed all right and after this I need to add it in the plugin of the Tailwind CSS uh Tailwind config file actually so here all right so this has been added and uh now don't go to the next GS this will navigate to I think the GitHub repository uh stack builds um this this is just the code you can ignore that um I'm going to open up the use and uh so it's actually showing you that if you need to create this kind of button you need to write all these Tailwind CSS classes and uh Daisy UI comes with the cool looking only BTN class okay so what I'm going to do is I'm just going to copy this one and uh let's go to the page and let's try to add this button over here and in react we know that we need to use class name over here we need to change it so let's go and here you can see that we have created this cool looking UI including the hover effect including uh the Border radius uh different border and the button text capitalized as well it is all happening because of only one class and we can add different colors to it um like it so let's try to add that button primary okay this is uh going to change the color to the primary and you can see that and we can override the classes of it and we can add some more classes to it of the Tailwind CSS like the width 64 and round rounded full uh we can add that all right and uh I'm going to come back to this particular page customize components um um so let's quickly do that let's say that we want to add the rounded full to all the buttons to all the elements which are using the BTN class okay so we can override it using the Tailwind CSS apply function this add apply so we can do it by going over here button apply rounded full now all the buttons all the elements which are using the BTN class is going to be rounded this this is how it's looking like all right so let's close this up now let's go to the documentation I'm using the documentation because I want going to show you that how to use the documentation so we can go to the config and uh this is where we need to actually add different theme names okay we need to add uh first of all let's add everything in fact we don't need everything I'm just going to copy Daisy UI from here tailwind and Below plugins um let's close this object and inside it we need to have themes and inside these themes we need to have an array of all the theme names which are provided by Daisy UI so let's go to the themes now all right so these are the different names so these are all the different themes that uh the daisy UI actually provide we can check that out as well I can click on the aqua you can see that everything is aqua automatically because this website is built upon the daisy UI that's why um it's it's actually taking up all the font colors background colors all the different colors which are set acid winter coffee night uh lemonade uh cyberpunk uh retro so we can use all of these so what I'm going to do is um whatever we require in our application we can copy these names from here and we can check how it's looking like by clicking on these things so for now uh let's try to add um these light dark okay inside it so light dark and um after this I'm going to add the Retro let's add the Valentine let me see what's what's the name so this is the name Valentine all right and uh I also want to Retro name is Right U we need to have an aqua so this is just to elaborate you guys how things work okay so aqua all right so these are added we can add the custom theme as well by adding the different colors uh so if I go down you will see that I can have my theme as well so I'm going to copy this thing from here and uh I'm going to add comma and paste it like this so let me change its name within the double codes to custom theme all right so this is how I can add my custom theme these are the default colors which I can change um so we can you can actually I will come back to all these configurations later on all right uh let me change the color it's not looking good let's go to the doc so by default it takes up the do theme as per the configuration that we saw over here these are the optional default values so we can overwrite these so we have set these values in our configurations let's go uh we have set the light dark retro valtin aqua and these are the custom themes so quickly if I want to show you that how it's looking like if I manually change uh these theming so what I can do is let's go over here let's go down and this is what I need to add so data theme equals to light okay for now I'm just trying to see that whether it started working or not so I'm going to save this file let's go and you can see that everything has become light the text font color has been black and the button color have been changed according to the light theme and all these configurations that I've added I can only use these particular theme names so if I want to change it to Retro let's copy the name let's go over here I'm just testing this out for now so you can see that everything is being retroed and the button background color have been changed the hover effect have been changed as well because I'm using the components of this Daisy UI okay U actually these will be remain I think uh black because I'm not using the daisy UI um let's let's go uh yeah so this these will not be changed uh what I'm going to do is I'm going to add few stuff the table and those components uh so so I'm going to open up the table okay and U I can copy up any table from here all right so let's copy this one jsx and U I'm going to copy this one just to see if it gets affected because of theming so I'm going to come over here let's try to paste this thing all right so I have pasted let's see if it started visible yes this is started visible and uh we can add some more components to see if things started working so this is how it's looking kbd uh stats and um I can add different stats from here so let's try to copy this one copy and below this div I'm just going to paste that in let's see if it has started working and yes it has started looking good uh and the reason it's having a gap in between because I think um I've added justify between over here and I can add the margin top as well uh to 20 all right so you can see that it's looking pretty cool and according to the theme it's changing the color of this text and the background color of it as well so I will be testing it again uh so actually I don't want to add the margin top here in fact I want to add the margin top to this one all right so it will look good now all right you can see that it has added the space in between now it's time to actually create the context create a high order component and manage different theming and store the theming data in the local storage so what I'm going to do is I'm going to create a new file uh in fact let's create a folder context okay so inside the context I'm going to create a file so this is going to be the theme context. TSX all right so if you don't know how to use the context API I have used this concept in almost 10 of my videos but I have created a separate video as as well that how to integrate context API in in nextjs 13 13 also follows the app directory so there is no difference you can check that out and learn the context API so first of all I will be using the create context use State hooks inside it so these this is something that I need to add the client at the top okay so after this I will be importing few stuff so first of all I will be importing create context use State use effect that I will be using in this file and uh I think that's pretty much it so I will be adding react over here all right so let's try to export the theme context from here so theme context this is the variable and then the create context which I have imported above from the react all right you can ignore this error it will not throw any error this is just a typescript uh thing okay so um Port const theme provider equals to and I will be passing the children inside it okay so let's add uh we can have the any type for now to it okay so uh there seems an error let's try to wrap this all right over here I have misspelled the const and it will work fine okay so inside it I'm going to pop in few State variables to save some off our time theme set Theme by default I am setting the light theme and is Mountain set is Mountain this is the logic that I'm building is mounted means that uh sometimes it takes time to fetch the value from the local storage and update the background and the colors of it so meanwhile when it is not mounted I will be showing the loading bar uh on the page okay so I can use the use effect here all right first use effect this is going to have uh no dependency so first of all uh once that is triggered I will be setting is mounted equals to true all right and then I will be using a variable stored theme equals to local storage do get I item um theme or by default if it does not exist by default I'm setting the light theme all right so I can use that variable set theme equals to the stored theme variable all right so after this I'm going to check if it is not mounted then I'm simply going to return the loading uh which will be visible for 1 second on the UI okay so after this I can create a different function to change the value of this theme so I can write the change theme equals to theme equals to string like it and set theme equals to theme which is coming from the client side whoever will be calling this function and then I will be setting this theme variable inside the local storage okay and finally we need to return stuff from here so I will be using the theme context do provider and uh I will be giving it a value which is required and I need to pass the theme name and the function because outside of this thing uh both of these values are required this is to change the theme in the in that attribute that I just showed you and uh after this I can add the children and let's close this theme Provider from here so I think we we are done with this file um if you don't know how the context API works you can check that out but I have tried to explain each and everything in this file so what this is doing is whoever is trying to access these State variables I'm passing it in this value attribute so this theme and change State uh theme uh will be available will be accessible to all the components uh which are being used uh in this particular application all right so let's save it and uh I'm going to create another file so quickly I just want to let you guys know that I've created this WhatsApp Channel and you will be getting updates on the new things which I'm working on and the new videos quickly go check out the link in the description of this video and open up that link and follow my channel on the WhatsApp with name programming with umare so let's create that I'm going to right click the context folder and I'm going to name it client theme rapper. TSX all right so actually I need to create this wrapper to wrap my layout file the reason is that um I need to use the use context hook and I don't want to convert my page uh actually the layout. TSX file into the client component and use context H can only be used within a client component all right so use context from react all right and here I will be importing the theme context which I have just created from the theme context file okay from here um and now I will simply export default function client theme wrapper and it's going to take in the children of the layout file okay for now just add the any and uh let's try to import the theme value from here use context theme context which I have imported above okay and then I will be returning the div and let's add the children over here okay so for now let's keep it like this and I'm going to open up the layout. TSX file here I'm going to wrap everything within the theme provider okay so this has been wrapped around the div inside the theme provider I need to wrap it in the U client wrapper so client theme wrapper all right so the reason I have wrapped into both because the theme provider actually contains these values uh these these two values the theme and the change theme function all right and I need to use this theme outside of this file so it has to be wrapped within the theme provider in our layout file because we are using theme over here all right so what I'm going to do is I don't need to make any change in this file so I'm just going to close it I'm just going to close this file as well and uh I don't need to open up this file so I'm going to import that function which I have created over here this set theme because I am this change theme actually because this is uh needs to be used outside of this file from these buttons uh so that it can change the set theme value of this state variable so when this value is going to gets changed we are going to get back this value in over here from from this theme and we are going to change the value from here so I'm going to open up this thing you know that I have added this data theme retro over here I'm just going to remove it from here let's close it and I'm going to paste it over here all right and uh here I can change it to theme so this is how we will be wrapping everything the whole div including the nav bar and the children under this particular file and this theme is going to gets applied to all the children including the Navar and the content in the body okay and this theme is something which we need to update by calling this function now so I'm going to open up this Navar so in this nav bar I need to import this thing so this one which I have already done so here I will be using uh change theme and this is going to be from the use context hook and uh I need to actually call that uh theme context so theme context from that file okay now I can use this change theme function within these buttons so this is the light mod so first of all let's try to change its color to the BTN for now and and U I'm going to add an onclick event so on click Arrow function change theme and I will be passing light to it manually okay and U let's add the class name to it as well BTN uh BG gray since I am manually using the Tailwind CSS classes so it will not be changed by the daisy UI theming uh it will remain same okay and I need to change its text to White because the background is always going to be dark all right so BT and dark and uh let's copy the on click event from here and change it to Doc all right so let's go there seems an error you can not DOT into a client module from a server company you can only pass the imported name through the ne ation bar all right so we need to change it to the use client actually because we are using the on click functions all right so you can see that the error is gone uh let's go over here let's refresh all right so I can click on the light it's working be and I can click on the do all right guys so it has started working and uh let me see if the values are getting updated in the local storage yes it's getting updated if if I click on light it's getting updated over here okay so let me refresh the page if it Remains the white yes it Remains the white and this is all because of uh this thing this local storage logic which I have implemented all right so let's quickly copy paste of these buttons I'm just going to remove it and U I'm going to pop in uh the different designs that I've already added so you don't uh need to wait for that so let's add that so I've just popped in all these things okay so we have this retro do we have the Valentine no yes Valentine is added um we don't have this corporate so I'm just going to remove it so it doesn't cause any problem so let's save this file let's go over here and now you can see that it's has started showing up we can click on the doc let's refresh the page yes let's click on the Valentine and it's showing the pink color and uh let's click on the Retro Aqua custom theme so these are the custom values this is not actually light because you can see that the background is white but the text colors are different and it must be using some uh Daisy UI classes uh that is changing its color but uh we can actually come back over here and change the colors over here as well all right so this is how we can Implement theming and we can add some more variables over here if I go to this one and I can go to the config uh actually the colors and you can see that these are all the colors available that we can add in it and if I click on the theme uh let's go down uh these are the different names and uh we can override the designs of theme as well by changing the Border width border color or any other property and if the color is being changed uh we can change layout as well based upon the color which is selected we can override uh this uh the existing theming designs as well by changing its primary color primary focus color by adding this requir dot dot dot required function as well um and we can override the classes here as well okay U I'm just looking into that uh all those variables just going to pop in my own values like this so these are the uh recommended uh variable names which we can add over here and if I go over here uh if I click on the custom theme you can see that it has become dark it is not actually this dark um it it's slightly dark and it's changing the color color of buttons as well which is using the built-in classes of the daisy UI okay so we can modify these things as well if you have liked this video don't forget to subscribe my channel I'm putting a lot of effort creating these videos for you guys and uh comment below if you have any question and one more thing that I have created a WhatsApp Channel as well with programming with Omare name and I'll be giving the link of it in the description of the video I would suggest you guys to follow that channel on WhatsApp to get updates quickly about what I'm doing um and the new videos which are coming up so do check out the WhatsApp Channel Link in the description of this video thank you so much for watching guys see you in the next video

Channel: Programming with Umair

Views: 3,208

Keywords: daisy ui theme next js 14, daisy ui tutorial, next js 14 tutorial, tailwindcss, tailwind css, tailwind css tutorial, tailwind, light and dark mode in next.js 14, how to, next js 14 crash course, custom theme in daisy ui, change colors in theme daisy ui, override theme colors in daisy ui, nextjs 14 features, next js 14 update

Id: ZxrNzv0rEws

Length: 31min 41sec (1901 seconds)

Published: Wed Nov 15 2023