Tailwind CSS Dark Mode | React App Theme Switcher

hi guys in this video i'm going to show you the quickest way to create a dark mode on a tailwind react app so let's start by creating a new react app using npx create react app and i'm going to name it as tailwind dart mode once we have it installed let's open up the folder and open our vs code once you have the ps good open let's run the app using npm start as you can see this is the default react app so next step would be to just remove any unnecessary divs there and remove any nsa logo because we don't want that next step is to open up tailwindcss.com open the get started guide and framework guide here i'm using create react app so i opened up creator tab first step is already done so next step is to add this npm code into your terminal so i created a new terminal since that's already running the app so and just added the following code this will install the tailwind css as your dependency then create a new config file using the following command so this should create a new config file as you can see now we're going to add the required contents in the config.js file this should make sure all your files have tailored in css applied now lastly just copy all the utility classes from from the website and add it to your index.css file now that it's done let's test it out so i'm going to close the current app running and then just start again using npm start right now we didn't see anything because we don't have anything there on our app.js file so let's just add a height of screen and background of blue 200 that should work so it means tailwind is currently working on our site to add the dark mode open up our tailwind config file and just add dark mode there and since we're going to use class based dark mode so we're going to add class there now once that is done the only other step is to make sure you go into root folder and go into index.html and just add class name dark here make sure it's class name and not just class and dark so that should ensure the dark properties are applied within the app now that's set up let's just uh add a few style i'm going to center the div and add a button to it here so as you can see it's currently with background white and green button there to have the button working we need to import two hooks use state and use effect once that is done i'm going to create a new theme and set theme variable that will have the default state value of light so that light background is appearing whenever the site loads once that is done let's create a new use effect hook and make sure to select theme as a dependency so that every time the theme changes it takes place now here what i'm going to do is i'm going to create a new if statement and that just checks if theme is dark then it will check the document and document element and class list and it will just add the dark there and similarly we're going to do a else statement and it's just going to remove the dark class from it next step would be to create a handles theme switch function i'm going to create a new arrow function named as handle theme switch and inside here i'm just going to make sure i set the theme to either dark or light so basically it's just going to start by checking if theme is dark then on click it will set it as light if not it will just set it back to dark and now lastly we're going to add this function we created as an on click event on the button to make sure it triggers this uh dark mode class when clicked and to make sure it works we're just going to add a dark background black to the div we created as the background now save it and let's just click on the button and as you can see it's dark now if you click again it's going to go back to black or you can choose any color you want i just added black and white here now we can take it to a next step we can make sure that our browser checks what the preferred uh scheme is like they're going to check if your browser prefers dark mode or light mode and they're going to act to it accordingly when the fir the one the website first loads up now to make this changes let's start by removing the used as light to now remember we set it up as light by default but now we're going to set it up as null and have a use effect hook to check the preferred scheme so we're going to do so by creating an if statement that is going to check for window and going to check the batch media and it's going to check if the preferred color scheme is dark and if it matches only then it is going to set the team as dark if not it's just going to set it up as light and we're just going to run this once we do not need to run it multiple times we're just going to have to run this once and if you check it now everything should be working just like before and there you go that's how we create a dark mode in react and tailwind

Channel: Over Clocked

Views: 40,432

Keywords: Tailwind, Tailwindcss, react, react.js, reactjs, darkmode, tailwind dark mode, tailwind css, tailwind css react, tailwind css dark mode, tailwind css tutorial, react and tailwind, tailwind theme switcher, tailwind css dark theme, tailwind css theme switcher, tailwind dark mode theme switcher, tailwind css dark mode toggle, tailwind css react tutorial, tailwindcss, tailwind tutorial 2023

Id: VylXkPy-MIc

Length: 6min 33sec (393 seconds)

Published: Sun Sep 18 2022