How to Add Dark Mode to Your React App | Styled Components

[Music] hello everyone and welcome back today we are going to try to implement a dark mode in react apps and as you can see in here this is the final project what we are going to building and this is very simple and as you can see in the top right in here we have the moon icon if i click the moon icon now we have the dark mode if i click that again which is the sun icon right here now we on light mode all right so as you can see in the right side in here we're storing the value into the local storage if i select dark mode now as you can see in here we have value dark so every time i refresh now we still get the dark okay because the value is stored in local storage that's happened with a like mod as well so if i choice like and i refresh is still like okay so that's what we're going to building guys and the first thing what we need to do is i want to stop the final project close that and let's open the vs code in here i have already running yarn create space react react that's app and dot this will be generate criteria up in this current folder which is react dark like mode folder okay i have already doing this so let's run the app i can say yarn start enter this is react apps by default so let's go to the code i want to remove couple file in here i'm going to remove this set up test.js service worker logo and index.css the app test.js and app.css and inside the source folder now we just have app.js and index.js so let's open the index.js file let's remove the index.css you don't need that we need to remove the service worker and this thing right here okay let's make that simple so save and now let's go to app.js just close this so let's remove the logo and the header the header attack right here just put h1 and i'm gonna say wait h1 and app save now um what's this app.css so let's let's get rid of this now we should have app in a browser okay pretty awesome so now inside the source folder i want to create a folder called components and the first thing what we need to do is i want to create the content components which is the h1 and paragraph in the button right here so let's go to the components i'm going to create file to say content.js and i'm using extension called [Music] es7 react redux crop ql react negative snippets so i can say rfc to create functional pass component and enter now we have functional pass component so we can just say h1 and let's say lorem [Music] 6 and paragraph i'm going to say lorem 3d and let's say down here on a 3 button let's say read more okay now save and of course it's not showing in here because we don't yet imported into the app.js so let's import it in here so we can say import content from dots last components less content so let's bring the content inside in here okay so let's say content like so now save we should see the content here bam so we need to install a package called styles component so let's open a new terminal i'm gonna say yarn add styles style component i believe and hit enter alright so it's done if i open the package.json file now in here we should see style components alright so let's use that into app.js file we can say import style from style components and we need to create a variable called container set that equals to style dot diff and backtick in here and we can write css in here for example i just want to say background into red now if i save of course not do anything because container is declared but never use all right so let's copy that and put that into the different here we'll wrap everything inside the container like so now if i save now we should see a background red okay pretty cool we don't need that we don't need background right in here we need to say maximal width i'm going to say 50 percent and let's make that center so i can say margin a gram top and auto left and right and a button and the bottom i want to say a zero okay let's try to save and here we go cool so next inside a source folder i'm going to create folder for now just say styles and let's create a file in here to say use a dark mode dot js all right let's close this terminal i want to make that smaller so let's say rfc enter and we don't need to return jsx in here we need to just return array and we don't need to react we need to use state okay and let's create a state in here let's say cons let's give a name team and set team so that equals to use state and by default i want to set that into dark okay and we need to create another function here let's say cons let's give a name toggle toggle theme set that equals to error function and i'm going to check if the team is equal to a dark i want to set the team to the line else we need to set the team into the dark okay what the meaning about this if the total theme is fire let's see the final project if the toggle theme is fire and the theme is equal to dark we need to set the theme to the light okay now this is dark right if i click this now set team light is fire okay else meaning the theme is live which is now if i click that it should be changing the theme value into the dark okay the dark all right i hope that make sense so let's returning the theme and toggle theme okay save and let's go to app.js file we need to import the use dark mode in here so let's import use a dark mode from dot's last styles slash use dark mode and we need to say in here let's say cons we need to grab the team and uh what is this toggle theme all right so that equals to need to invoke the use dark mode in here okay if i console.log theme of course now we should see uh dark in console so let's try to save and see ctrl shift g and dark okay the next thing is we need to create a toggle which is the icon right here so let's create a component inside a components folder i'm going to create a file called a toggle dot js okay so let's bring in the rfc again enter and let's put h1 for now to say toggle save and let's import that into app.js file and down here we can say import toggle from dots last components slash toggle okay let's bring that into a container right here let's do toggle if i save now we should see a toggle up here okay cool and by the way we need to send the theme and the toggle theme into the toggle component so you can say toggle set that equals to toggle has come from me no toggle what happened to me it should be team and team okay let's come from here and we need to of course send the toggle team so toggle team set that equals to toggle theme save and let's go back to the toggle.js file and we need to grab the theme and the toggle theme as a property in here so we can grab that say toggle and set toggle no set toggle what's this toggle theme all right of course total yeah okay now let's try to console.log the theme if we uh see uh dark in the console is work now save really okay this is team and this is toggle theme let's make sure it's work oh it's what happened i can't speak anymore guys but let's try to save and let's see in the console we have dark okay awesome so in deep right here if i add on click event on click set that equals to toggle tim okay if i save now if i click the toggle right here it should be changing the value like dark light dark okay awesome so inside the div right here we need to return a icon is depend on the theme value okay you can say theme if equal to like we need to return a moon icon okay if the like we need to return moon icon so i have already put my moon icon in here which is the svg right here i can just copy and put that in here like so and else we need to say uh sun icon okay let's just copy this thing right here and put that in here okay like so now save let's see in a browser and in the console now we have couple warning that's mean we should use comma case in stroke width in stroke landscape and stroke line join okay so let's go to the toggle js let's select the stroke width we need to remove and thanks that into stroke width with couple command case and let's looking for stroke line line cape let's copy and say stroke line cape and another thing is stroke line join okay let's just ctrl d and stroke line join save now we don't have any warning in the console everything is clean but we cannot see the icon right here that's because by default we have a dark theme right and dark theme half icon which is uh sun and sun have a color white that's why we don't see the sun icon in here if i click that now we have moon icon okay cool so inside the style folder i'm going to create a file called a global global style dot js so in here we need to create a global style so we need to import create global style this is from style component style desk components and we need to export variable in here to say cons i'm going to give a name global styles so that it goes to create global style create global style backtick and we need to write css in here okay for now i want to grab the body and change the background into red for example when i save and let's go back to app.js we need to import that in here import global styles from dot's last styles slash global stuff so let's bring in the global style inside a container right here we need to bring in here let's say global global style okay if i save now we should see a background red okay that's working it's come from here okay so down here we need to create another variable let's say export cons like theme so that equals to object and for the body we need to set that into white and for the text we need to set it into let's say one two one two one two okay and let's just copy this thing right here and put that down here this should be a dark theme and for the body we need to say one two one two one two and the text should be white okay now save so next we need to import the light theme and dark theme into the app.js file so in here we can say like team and dark theme okay so we need to import team provider come from style component so you can say team provider and we need to wrap our app right here inside a theme provider so let's copy that and put that in here like so and we need to just copy the container and put that inside a theme provider and in here we can see theme set equals to uh i'm going to create a variable call theme mode okay so let's create up here let's say cons theme mode so that equals to if if the theme is equal to like we need to use the like team okay like so else we need to use the dark theme all right so now save so now we need to grab the body object right here and put that into the background value okay it depends on what user choice if user choice alike okay the theme is like we need to use the like team like team have a object right here okay the body is white the text is or dark okay or if user choice a dark for example okay which is the dark theme right here it should be fire and dark theme have uh object body dark and text white we can grab the value inside in here we can say we need to grab the theme and we need to grab the team dot body okay so now save and let's go back now this is dark okay if i click the icon now this is white okay i hope that makes sense so now we need to change the color as well so let's do in here we can say tax and we need to just copy this thing right here and put that in here and instead of using a body we need to using the text all right so let's copy and put that in here save now if we on the dark mode we see wait no [Music] not text should be color save and let's see now is white okay if i click it's changing okay awesome so next we need to styling the button right here so let's go to content.js file we need to add class name in here say class set name equals to btnds primary safe and let's go back into the global styles and we need to grab the btn primary class and in here we need to say the background into [Music] background into we need to add another in here let's say primary we need to say six two zero zero ee and for the dark team we need to say primary bb x6 fc okay so let's try to put that into the background right here we need to just copy this thing right here and paste that in here like so and we need to grab the primary this should be background not background cd background and we need to change the color into this thing right here and we need to say the padding let's set that into 0.5 ram top and bottom and 1.5 ram top and left left and right you need to change the font size into one rhyme one ram and let's say the border radius radius radius into one ram let's say cursor pointer and outline none and border let's say none okay now save and let's take a look in the browser now we have beautiful button right here if i click it's changing okay so let's add transition i'm going to say transition say all 0.5 5 second and linear okay now save if i change that now we have to transition okay of course we need to just copy and put that in here save and let's try it again bam bam okay beautiful so next let's put the icon into the top right so let's go to the toggle js we need to import style from style component what's the style dance component and we need to create a variable called sun and moon okay and in here we can say sun so that equals to moon set it equals to style dot svg because we need to change this svg right here into the sun or moon okay so we can say position into absolute and put it into top to ram and right let's say for ram okay so now we need to change the svg this thing right here into moon of course we need to add moon right there and this thing right here say moon and this should be the sun all right save and let's see what we have for now refresh uh we have some error in here what a problem uh it should be moon okay now save let's take a look again okay let's put that in here but we need to add the transition of course so let's copy the transition we need to just copy and put that in here save and now everything is work and everything is awesome all right cool so now if if i for example choice like mode and if i refresh it should be back to the dark mode because the value is not stored in the local storage so that so how that we can store the value into the local storage so we need to create a function in here i want to say set mode set that equals to arrow function and i'm going to say window dot local storage dot set item set item and let's give a name team team and i'm going to put the mode right here okay so instead of using set theme right here we need to say set mode like so okay and inside a set mod function we need to say set theme equals to everything the mode is okay so we need to put the mode right here so next we need to import use effect from react so we use effect and we need to use down here let's say use effect and like so and we need to put empty array because the use effect right here should be fire every time i reload the browser okay so let's create a variable called local theme set that equals to we need to grab the value in the local storage window.local storage we need to use method called dot get item okay and item what we need to get is basically theme it's come from here where's that come from here okay and we need to check if local theme is true meaning if we have a value we need to set the theme into wherever the local theme value okay or else we need to set the mode into the dark like so now save all right so now in storage right here we have key theme and value dark if i click the icon right here the value should be like okay if i refresh is still like of course okay the next thing is i want to use roboto font so i can just click robo tool right here and let's select the like 300 amp i'm going to put that into html i just copy that and open my public index.html and put the link in here okay save and to use that we just copy this thing right here and go to the global styles and put that in here okay now save let's take look bam uh we can add a paragraph line hey by the way say a line [Music] into 1.4 ram now save and here we go all right so now let's close this thing right here and if i click the dark mode you have dark mode if i click like mode everything is work and if i refresh it still get the light mode okay or even dark mode if i refresh still a dark mode okay alright so i think that's it for this video guys and i hope you learned something new from this video and i'm gonna see you in a very next video bye

Channel: Cand Dev

Views: 4,685

Rating: 4.9718308 out of 5

Keywords:

Id: Zgvm-mP9_3A

Length: 27min 57sec (1677 seconds)

Published: Mon Oct 05 2020