TailwindCSS Dark Mode UI with React App

hi everyone welcome back to another for those record video this channel is where we learn and share skills about design and development if you want to grow your skills and learn new things that's coming up please like share and subscribe for more in this video we'll learn about implementing dark mode interface with tailwind css inside of our react application dark mode has seen a lot of popularity and training these days even github and also youtube has a dark mode implementation few recent months back tillwin introduced dark mode to its features which can be seen into core concepts and dark mode we'll go through this particular documentation right here and we'll implement dark mode using tailwind css and uh the thing that we are trying to build is something simple which is this one we can toggle on to uh the light mode and also go to dark mode behind the scene i'll also add some components that's needed for example we have this particular uh napa right here and also maybe also we we can add another component of toggle right here as well and also maybe another component for this one as well so i will uh go ahead and just do these components and we'll get back implementing dark mode to our uh ui that we created so if you are new to tailwind css i highly encourage to check out nodcave.com tailwind cheese it where you can find the classes that we need for example background and it gives us the background colors and all the related things that's provided out of the box with tailwind so you can go uh to this particular url right here so that it's really easy for you to create a ui interface basically i have already completed componention of our components i have something which looks like this one currently in the browser so if we take a look at the code then we have our src folder by the way i have used the react tailwind starter and you can also find the repository to the link down below and if you are interested and inside our index.js we just have our navbar where we have our main an app bar component right here and also our app so inside our app we have this section that we created and which is basically has the tailwind classes and all the classes that we need and but we don't have any functionality to our total icons right here and uh we have uh added images that's needed and also made some components the components that i created are toggle.js basically we will be toggling uh between the um light mode and the dark mode uh using the local storage will also make the use of context api as well so team context basically it's blank and we'll be uh writing some functionality to uh generally see what's in the local stories and and update it according to the local stories uh whether it's a dark mode we will toggle it to light and if it's light we'll toggle totally to dock and inside our navbar we have basic um you know uh the navbar and here we have the toggle component right here as this which sits right here so uh let's start with the theme themecontext.js import react from react we'll create a constant and call it get initial theme and create a function where we can return the current theme that we have in the local storage so if we have uh window um we can access the local storage with window.localstories so we can write window dot dot local storage uh so if there is something in the window.local storage uh we can create another constant and call it stored preference or stored prefs so which can be accessed with if we go to the documentation and inside our dark mode right here we can see here that windows local storage dot theme and local storage dot match media so uh we can access the local storage with local storage dot get item but we don't see anything right here but we can see that it's adding um the class of add and removing the class of add uh to our um html uh element so we'll kind of achieve the same but with uh context api as well as our local stories so windows um window dot local storage dot get item and the thing that we want to get is current theme so um if we have this um type of stored preference that we have in the local storage is strictly is equal to string and then we have uh we can return our stored preference and we have another if statement where we we can check the this stuff right here which generally tells us uh whether we have the match for dark or light so dot matches if it's um you know uh dark then we return um dark so we return this thing and if not we will return light which is this one so uh basically this is it so we can add another thing inside of our if block right here uh where we can check the type type of window is not is equal to undefined and window the local storage into the local storage yeah that's pretty much it so now we will create another constant where we can um basically um use uh some kind of provider from the context api so that we can check what's in our local storage and add and remove or set item and get item which we can see right here but it's using classlist but we'll be using set item and get item const and call it team provider this takes the initial theme and its children as prop uh so initial theme and so basically children is everything what's inside and then we'll make the use of our use date hook as well so create a constant and call it theme and sit theme so uh these are the two things that we will make the use of our um listening to our uh state so dot use t and we will pass the get initial theme right here and let's create and the constant and call it check theme so basically the check theme it takes so that we can remove and add items uh looking to the existing string that we have added to our local storage so for before that one we will create a constant for our document element so call it window dot document dot document element and another one constant and call it is dark which is existing is strictly equal to dark or dark and we can now write a root a root dot class list dot remove um is dark and you will make the use of like generally operator where we we can see that if it's dark um you can change to light and if it's light change to dark so root class list basically we are doing the same that we can see here but with the help of uh ternary operators that's available and also we are making the use of um local stories as well so add existing so now uh we will set our uh item which which can be done with local storage dot set item and which is current theme which is the same as we have here and and write existing so if we have initial theme we can check theme and uh check whether we have what we have in the initial theme as well and uh we will also need to um you know re-render our dome in order uh there is and change uh i mean if we toggle on between the light and the dark so uh for that re-rendering we need to make the use of use effect hook so and basically we want to take an eye on theme and ultimately we also need to return some jsx basically we will return theme provider theme context context dot provider and then close this provider yeah okay so inside our provider we will also want to destructure and take um team and also the th theme and setting and inside here whatever comes inside this as a children basically it's the same that we can see here so and ultimately we want to export our constant theme context and we have dot create context so basically this is it how we can um like create uh and maintain our current state with the help of context api so we will move towards um toggling our actions so inside our toggle we will we need to import theme context theme from uh theme context [Music] and inside here we will restructure our theme and set theme and which make the use of react dot use context and we have theme context here basically what we can do here is we can return uh whatever by checking the condition for example we can return some jsx like checking out the condition between a theme if it's dock then we will render anything that's between here and if it's not dark then we can render anything between here so basically uh this is what we are trying to do i will add some buttons right here basically what it sees is if we have theme is dark then we render this button if it's not rendered this button so we obviously need to add a different on click handler uh to our buttons as well so i will go ahead and place some buttons basically i've added some buttons and also made the use of some of the tailwind classes and we also have added some dark variant we will definitely go through our dark variant which is really thing to understand uh in order to understand um dark interfaces in tailwind so uh we will now also need to add on click handler to our buttons as well for that one we can uh right click and we'll basically um like to change our set t if the theme is dark we will change it to light and if it's light we will change it to dark we will also write the same on click to our another button as well basically there are two buttons so we want to switch between those two buttons oh basically the thing is we have uh created our you know a theme context provider but we haven't wrapped our provider to our entire application where we can do it inside of index.js so before moving on to that one i will like to quickly take a look at the variants that are available for the dark mode so as per the documentation you can see that we can define uh tillman includes a dark variant that leads us to a style uh inside of dark mode as well so here we have dark busy which is dark dot as a variant and this is dark dot dot as a variant and this is another variant so generally speaking we can add uh this variant inside in i mean in front of our classes to activate it inside of dark mode so uh to enable our dark mode the options uh enable uh that we can enable inside our dark mode inside of our tailbone config.js where we can see here that i have activated um class you can activate media or add it to false where we don't generally use a dark mode and we don't import any anything regarding dark mode inside our project so i'm using the class which is really highly recommended as per the documentation as well so i will just go ahead and add some classes to our body so maybe add a dark and then we can use bg black so in the dark mode we have the background black so it's that simple later on if we just add these so also we need to import the theme provider right here um i mean the thing context that we made so inside our theme context we created our theme provider so we will be wrapping this particular thing inside of our overall application instead of in index.js where we imported theme provider and wrapped our overall application which is the body to theme provider so that we can listen to that particular changes which is um theme and set theme and later on we just added these two and also made the use of our contacts api to track our current theme right there as well so inside our index we added the theme provider if you have also noticed we have the dark busy backpack and if we take a look at our browser right here we can see the dark mode which is been activated so if we also take a look at application and local storage you can see the current theme which is the default is dark and we can toggle on to light and the local storage right here change to light and change the dark change to light as well and obviously we can add the white text to our dark mode right here and this can also be implemented by using the dark variant so we have this thing so inside our app.js we can write our dark and change the text to white and if we hit on c and look here and it's been reflected and it changes black and it changes to white so i will also add some changes to our order text here with the help of the dark variant tool uh basically i've already added some dark variants that are needed for some h1 and other text right here and if we take a look at the browser then we can see uh first of all the light variant and if you toggle on this dark variant and if we take a refresh it will start with the dark variant and if we toggle on it becomes light and we refresh it starts with the light so um everything is working fine we have uh made the use of uh local storage and contacts api along uh side uh with the tailwind dark ui inside of our react app so guys um i think this video will be really helpful for you guys thank you so much for watching my videos if guys want to learn more about design and development please like share and subscribe with a click down below i'll try to make more better videos see you in the next one

Channel: For Those Who Code

Views: 8,473

Keywords: React, Darkmode, Tailwind, Dark, Mode, TailwindCSS, css, dark ui, javascript, darkmode

Id: znU2RD0vGJY

Length: 19min 49sec (1189 seconds)

Published: Tue Jan 19 2021