Theme Toggle Tutorial using React Context

hello everyone today i'm going to show you how to create a theme toggler using react context and styled components so in here we have a brand new react app that you can create yourself with npx create react app and so now we can do yarn start to start our react app in the browser all right and let's open app.js and let's remove all the stuff we will not need so let's just relieve an empty div here remove all this and also in index.js we can remove styles from here and we can remove this this and this so all styles and logo yes remove all right and so now let's go to fjs and now we will use start components so i will install them so yarn add the styled components all right and let's import it here so uh our app will need some basic styling and the toggler itself so let's create a new component for the toggler and so in the same directory that our app.js is located let's do new file and let's call it toddler.js and let's create a function called toggler and it will return just an empty div and here we do export default toggler and we will use it in our app so here capability toggler like this all right so now let's create some some kind of toggler or checkbox too and so we'll have something on the page and i will try start by creating some text here maybe let's do h3 dark mode right and let's see yes it works right so in our toddler we will need a label we can remove this part for now and it will be an input type checkbox like this and now we want to hide this check box behind this leave this special div look right here all right and let's also import style components here so we can style this label this input and this div so let's do const styled label equals styled label and we can now replace it with this one styled label right and here we can do that our input will have position fixed and let's do left minus 999 pixels yeah but [Music] the div that is located near the input let's um put some width of maybe i know 50 pixels and this with half of i don't know let's try 16 and background let's do background of i don't know let's try with a right and here we have it all right so it's maybe a little too long so let's make 30. rounded corners border radius of 8 pixels i will just yeah it looks good so now we want to have a circle inside with a moon icon so to do this and we will use hero icons so i would do yarn add hero i icons slash react yes and inside this div i will use moon icon yes from solid yeah so moon icon has been imported for me here and here is our one icon all right so install inside this label and we have this icon that is actually an svg so let's style it a little all right so uh let's put half of 14 pixels yes and let's put color and white and background color because it will be a circle let's do maybe ccc yeah and the border radius of seven pixels because 14 and a half of 14 is seven and now let's just add some padding and so it will be position absolute i will make it a absolute to this parent so this one will be position relative and this will be position absolute so from the top it will be one pixel and from the left it will also be one pixel all right and now we now we want to make it clickable so let's uh let's fix it so we will use state for this so here we will create a new file let's call it um theme not state a context i mean framecontext.js like this and let's import react from react and let's create our theme context so it will be const theme context equals react create context and the default that will be an empty object and now we just need to export default theme context all right and now we want to provide this theme context inside our whole app so to do this we we need to use uh our con text here so theme context yes provider we can leave value empty for now and let's put everything inside so while you can't be empty like this is that let's put an empty object right so it works theme context has been imported for us here and we can put some value inside that we can later use in toddler so to do this we will need state inside our app so let's import your state from react all right so now we can you state the default value will be false let's call it uh and dark mode so the state will be called dark mode and set dark mode all right and we need both of them inside our context so let's perk dark mode here and set dark mode all right so now we can use dark mode and in our toddler and we can also set dark mode so let's go to toddler right and here we need to set the value of this checkbox and it will be disabled for [Music] for if it if the dark mode is false uh it will not be value but checked and checked will be dark mode but we don't have this property yet so first we need to use context to do this in this component we need to import use context from react and here we can use it use context and let's call our context theme and the context value will be our theme context yes from this file and as you can see the theme content has been imported for us so now we can use all properties that we pass here those are passed to our theme all right so now we have inside theme like dark mode that can be falsely true so now let's use it so the input checkbox will be checked if the dark mode is true so theme dot dark mode so it's false by default and we want to also update the dark mode to do this we will use this search dark mode so we will set it here and it will be passed to all the components right so on change and i will put it in a new line on change we want to do theme set a dark mode and here we can do the opposite of them dark mode so we can just grab this value and put negative of it or we could actually do alt value and use a callback like this and the opposite of old value all right now let's see it doesn't work because for now we are not defining defining any styles for and when the check box inside is selected so let's fix this first so when input is checked then the div that is lying around next to this input will be as follow so let's make the background maybe a little darker and so let's try with 668 now let's see if anything changes no not yet um let's see everything looks fine for now all right so um background and now let's also do svg and the svg background color will be let's do two two four okay for now nothing is happening with our toggler let's see why okay yeah here we have a problem we should pass a callback not direct call on the function like this now it should work yes almost works we just need to move this icon so here is our svg and we just need to do left let's try with 20 pixels that is too much let's 10 too little 14 almost 15. yeah that's perfect and now let's also do transition position all point for second and ease so we'll have some animation all right so now i also want to make styles for the whole app and not only for this toggle so let's go back to our app js and in here we want to provide some global styles for the whole app so the background and let's say for this text so to do this i will import and create global style and here i'll default i will define our global stacks so global global styles equals great roma style yes and we will define some styles on the body so the default value will be that's maybe the background color of af and now let's put those styles in here inside our theme context global styles like this and now the background is more bluish right but we want a different background if this one is selected and to do this i will pass this dark mode to global styles so uh dark mode equals dark mode right so in here i can change to um depending on the props that we have inside so props props dark mode if the dark mark dark mode is true then let's say we will do 3 3 4 and otherwise we will do this default white bluish right so now when i select it yes it looks better but now the text so let's define color and also props props dark mode so if the dark mode is enabled we want the text to be almost white and if it's disabled we want the text to be black let's do maybe two two two all right that should work let's see they say enabled yeah the text is dark and if i click it again now everything is white we can also pass it to other components that we create and so if you create the new components somewhere here you just need to use the state as we used in toddler and then pass the information to the toddler or to your components all right so that's all for today thanks for watching and leave a like and have a wonderful

Channel: Coding With Dawid

Views: 6,991

Keywords: react theme switcher, react dark mode switch, react theme context, react themeprovider, react theme toggle, react context example, react dark mode toggle, react js dark mode toggle, react context theme

Id: IK-7U_5uxlc

Length: 19min 51sec (1191 seconds)

Published: Sun Jun 06 2021