How to make a DarkMode switch in React Tailwind CSS?

hey there developers and welcome back to our Channel have you ever been coding late night have you ever been coding late into night and wished for soothing dark mode in your applications well today we have something special for you we are going to dive into the exciting world of react and Tailwind CSS to show you how to create a sleek and responsive dark mode switch for your next project whether you are a seasoned Pro or just getting started you will find this tutorial easy to follow and packed with valuable insights so grab your favorite text editor and let's get coding so first of all open the official documentation of the Tailwind CSS and from the home page click on the docs from there click on the Frameworks framework guides and as we want to use react so find the react documentation here click on that and we will follow these commands step by step so first thing we need to copy both of these commands and open your favorite terminal and paste it so it will the First Command will actually create the react project with the my project name and then with the CD we will go inside that folder and after it is done we will install the Tailwind CSS as the development dependency and we will also initialize the Tailwind CSS by using this command that will that will install it and also it will generate your daily config.js file all right the project has been installed now I will open this project in my vs code for that I will type code dot space Dot and now it is open in the vs code now I will install the Tailwind CSS so for that I will copy both of these commands and open the vs code and inside the terminal of the vs code I will paste these two commands it will run everyone one by one and you can see it has created an empty basic structure for the development configuration so I will now copy paste the default configuration that they are recommend recommending on their website so here I will replace it with the setting that we got from their website after that it is suggesting us to add this code so this is to add that element directives to your CSS so as it is saying at the Tailwind directives for each of the Tailwinds layers to your Source slash index CSS file so open it so you can see we have already indexed a CSS file so I'm going to copy it and paste it on the top of everything and once that is done I can run the project in the terminal the project is running now in my browser now I will copy paste this code in my main file app.js so open the app.js I will replace it with that one okay now you can see that the element CSS is working perfectly fine you can add a color as well to test it further okay it is working now let's start adding some Styles and content in this first of all I will add a main div and this I am going to add some heading next I will add some dummy text for that I will add a paragraph tag and I will generate some dummy text first on the bottom I want to add two two buttons so okay let's keep only one button for now so this is how it is looking now let us start designing this so first of all I want to add some glasses first class would be the width should be equal to screen width and H should also be screen and after that I want to add flex and I want to add items Center and justify Center also I want to add Flex column okay you can see that everything is in the middle now now I will add some classes here now I need some margin bottom after that I need to limit the width for the paragraph thank you now I will Design the get started button okay let me just quickly add some hover effect as well now on the top right side I want to add a button so for that I will add a button here and I will add some styles to keep it on the top right side for that add class name attribute now it's time to add some events so so first of all we need to make a change in the trailwindconfig.js file the change is that by default it uses is uses the dark mode value media so that's mean it will use the system dark mode or system Theme by default but we want to override it with the help of the class so that we could add last and we could utilize the toggle behavior from the button so here I will add a click event first on click and on this click event I will I can call a function on the function name would be the toggle theme and here we will Define that function now I will get the document dot document element Dot glass list dot add and use the dark class so whenever we call this function it will add or remove the dark glass so we will observe it by clicking on it from the inspect element so open the element and observe the body or HTML tag you can see if I click on it it will add the dark glass but if I click on that again it is not identity adding it again so let me see so instead of using add I will use the toggle function so that will remove as well so you can see it can remove and add as well now we need to make some changes so if there is a dark mode enabled then we want different background color for this so for that here I will add dark BG black now you can see that as dark mode is enabled that's where the background color is black now but the text is also black so we have to fix that as well in order to fix that I will add dark text should be white so in the dark mode the text should be white now you can see that in the dark mode text is white if I disable the dart mode the text would be in the default State and background color as well now I also want to change the background color of the dark mode button so for that I will add dark BG white and let's see but text is should also be fixed for the dark mode okay you can see that it is now looking better but the text does not make sense it is still saying dark mode so we have to change the text for the dark mode as well so here I will say that if so we also have to maintain the state or we can get the the we can get the state of the theme by using the document.documentalone.classlist so for that I will use a function it is dark mode active so I will use document dot document element dot classlist dot contents and give it the dark and I will return it so now I can simply call this function to check if it is enabled or not so if it is enabled then I will check I will light here otherwise I will add dark so let's see how it will look so you can see that it is light but it is still not rendering the the div element so the better approach is that instead of using this function I will use the state of the react for that I will use mode set mode and here we will import the use state from the react make sure to import it like this and by default the mode is light let me see so you can see by default it is light now we will add uh we will add a hook for use effect hook and it will receive a callback as the Callback function and the second parameter would be the mode so it every time the mode is updated it will call this function for us actually I can simply use this here I don't need a toggle theme function anymore also here let me update it with the dark mode and its default value would be false Set Dark mode okay now let me update this one as well and here let me create a variable that mode is equal to dark mode if dark mode is true then we will use the text dark otherwise light okay now we don't need this function as well instead of calling this function I will create my own function here that would be called on click and here I will set mode Set Dark mode once again let me add it as well here okay now I will revert the value of the dark mode so if it is true it will make it false here I will check if dark mode is not enabled then show the word light otherwise show the work a word dark yeah maybe we need the reverse okay so we also need to reverse this condition as well so there is an issue when I click on the dark mode it adds the dark but if I click on it again it does not remove the dark glass but it will add additional Dark Light Glass so we have to handle that as well instead of using toggle here I will use add so let's not use it at all so we will wrap it in in the condition that if dark mode is true then add the glass dark here else and also we need to remove the dark glass if it is not dark instead of add I will call the remove function okay now let's test it you can see that let me reload it first so you can see that it there is a dark class if I click on that the dark glass will be removed and everything is working as expected you can see that the word light and dark is also switching that's it so this is how you can create a fully functional dark mode switch using react entailment CSS I hope you found this tutorial helpful and now you can give your users the comfort of switching between light and dark modes effortlessly if you like this video and don't forget to hit the like button and subscribe for more tutorials like this one have questions or suggestions drop a comment below and we will do our best to get back to you thanks for joining us today happy coding and see you in the next video

Channel: AyyazTech

Views: 6,071

Keywords: dark mode, switch, React, Tailwind CSS, front-end development, UI design, user interface, web development, CSS, styling, mode toggle, theme toggle, dark theme, light theme, JavaScript, HTML, code tutorial, web design, React.js, TailwindCSS, CSS framework, React components, dark mode implementation, theme switcher, dark mode best practices, React development, TailwindCSS customization, dark mode toggle, TailwindCSS styling, React state management, light mode, tailwind css

Id: opCw9Mqf8hI

Length: 14min 4sec (844 seconds)

Published: Mon Aug 07 2023