Using Context to Build a Light/Dark Theme

what's up folks Spencer here with react native school in this video we're going to be building a multi themed app so basically we're gonna take this basic application which I'll walk through in just a moment and allow it to have a light mode which we see here in a dark mode so without further ado let's get into it let's walk through this app so what we've got here is a looking at this app start directory there will be a link to the actual repo down below where you could follow along if you want but we've got this index is where we set up some navigation we've got two screens we can just click through and view these different quotes from a TV show let me know if you know what TV show these are from but basically it's a it's a really simple app but we've got multiple things we've got these multiple screens we've got this navigation set up here so basically need to access all of these and modify all of these things with this light mode and dark mode so looking at our code we've got two screens list is which is a flat list I've also got this details data is just the data that's actually rendering or powering this flat list and then finally we've got three components our components are card which is really just each one of these row items I call it a card we've got a container component which is just kind of the background of all of this and then we've got a text component which is used for the text and these on this screen here so we've got a few different components we need to work with to actually set setup and integrate this light mode in dark mode and you may have noticed in the Styles here on our text as we've got not only a header style which has our default styling we've also got this header dark and basically what happens here is we're changing the text color so let's actually go to the container one because that'll be easier to see but you can see I've got container light and container dark if I stack this additional container dark style on here and say styles container dark you can see it's changing the background color basically we're inversing the white and the black so what was white will become black what was black will become white and that's kind of how we're going to do this so that's kind of how the actual styling will work then we use context to actually make the theme that's being used globally available be it light mode or dark mode and we'll also be using the new react hooks to just kind of get some repetition in there to better understand how we structure applications with it and the button that's actually going to talk toggle the light mode and dark mode will be up here in the top right so let's get to implementing now what I want to do because this is kind of a unique thing in our application I'm actually going to create a new folder called util utility and then inside of here I'm going to create a file called theme manager j/s and we'll import react from react and then we can go ahead and create our context so we can say export cost is equal to rather export Const themed context is equal to react dot create context so from here when we use context there's going to be a themed context consumer and then dot provider we're going to want to customize the provider a little bit so let's create a new component going to say export Const theme provider is equal to a new component in which we'll go and return our theme context dot provider all right and inside of here we want to return our children and children is a prop that's going to come from theme provider so basically we could call this by saying theme provider and then we'll have you know our app in here okay and that children is just going to go ahead and forward that along and that will make the context values available everywhere so thinking about the values that we need we know we're going to need to actually pass what the theme is and theme is going to be either theme will equal light or dark and we're also going to need a way to toggle our theme so first off let's do this light dark theme and like I said we'll be using content or hooks here so we could say Const will use a ray destructuring here we'll have theme and set theme will equal react dot use state and then we need to set an initial value here by default we'll set it to light mode all right next up toggle theme so we could say toggle theme will be a function so what's going to happen well we need to set the theme to light mode or dark mode and the logic here is going to be pretty simple if the theme is equal to light then we'll go ahead and set the theme to dark else we'll go ahead and set the theme to light so with that setup now we can actually go ahead and start trying to use this provider so I will go over to my index is which is kind of the entry point to my application and down here we've got our application we've got our root navigation and basically we want this theme to be available everywhere in our application so we're going to wrap our root navigation in it to do this well first off let's actually go ahead and import the theme provider from dot forward slash util slash theme manager we can then go ahead and where we've got export default navigation navigations just a normal component we can go ahead and make this a function that returns a component so we'll have our navigation in here and then we're going to want to wrap this in that theme provider we just imported so that's complete let's just try to view what our actual theme is so what I'll do is go into my screens into lists and then let's use the list header component here and we're just going to go ahead and render whatever the current theme is so I'm going to import text from up here and then we can go ahead and return let's just say lifer right now so we see that hard-coded value in here now how do we actually get what the real context are what the real theme is from context well in our component we need to get rid of this implicit return what we could say is Const you can use object destructuring because if we go to our theme manager we know the value is going to be a theme and a toggle theme so we're going to pull the theme off of this and then we'll say react dot use context and then when we use use context we need to pass the result of the create context in here so this is going to be theme context and my editor went ahead and imported theme context automatically for me so now let's take theme replace our text down here with it with theme and we can see we still see light which is to be expected now we need to actually set up the toggle so let's set up a button up here in our navigation to go ahead and do that for us so going back to our index is what we'll want to do is create a new button we'll just call this toggle button and we're going to the button from react native which I've already done and this is just going to return a button we'll give it a title equal to toggle and then an actually rather than putting it just on the list screen so here we could say how to write is equal to the toggle button right we see that up here but now if we go into this screen it's not there and rather than copying over this header right to each one of our screens obviously that could get to be a lot with a lot of screens we can go ahead and down as a second argument to our create stack navigator we can say default navigation options and then we can go ahead and pass in that header right there we see it here compress it and we also have it over here by default and then each screen could override it if it so desires okay our toggle buttons gonna work just like the our list it's gonna work just like this so let's just go ahead and copy this over so we could say theme is going to be react at use context theme context this time though we want to import our toggle theme function which will be called when this button is pressed they'll obviously need to import our theme context as well as theme manager save it and when we press it we see that we are able to switch on if we see this dark and light mode so let's actually make this work now so we can go ahead and actually remove this from our list because we won't need it in here and then we can go ahead and go over to our container oops we need to make sure we remove theme down here as well all right let's go into container now and we'll have to import our theme context from you / the manager you now we can go ahead and use the comps theme is equal to react use context theme context and we can say down here now so we've got our Styles container which is the default styles we've got container light and container dark so to use the appropriate style we can go ahead and say styles will use the array or the the brackets here to allow us to use a variable and when accessing a property on this object of styles and we could say container with the value of theme so remember themes going to be light or dark which aligns with these values so the naming does matter here we got container light container dark and if we save this and toggle it we can see we are changing that background color so let's go ahead and do the same thing for each one of our components here so I'll go ahead to card we're going to need it over here and I'll use that exact same pattern that we used previously so we'll have styles at the separator which I cannot spell and then we'll pass in the theme do the same thing over here for our card we're going to have to do it for both the Styles at container theme you so save this one we need to make sure we actually import themed context and then when we toggle it we can see we are inversing these values here if we go to our details screen we see we can't see our text but we are updating our list because we are using context and all that same data is being passed around now let's finally finish up the text one here so I'll import in our theme context go ahead grab the use context then we can wrap this up by saying Styles at header theme go in here and it looks good now obviously we still have this navigation bar we have to take care of so I'll go ahead close out our screens so if we look in here just like we used default navigation options for our toggle toggle button to be defaulted throughout we'll use default navigation options to set the styling for this header bar as well now the issue is context only works within components or that you use context of only works within components so how do we go about accessing that information from our navigation options rather than link within a component well what we'll do is actually wrap our component this navigation with our theme so what that looks like is say Const nav with theme is going to be a functional component that's just going to return navigation now we can say it Const themed use object Li structuring again we'll say react dot use context and we'll pass that that theme context we use previously and then the way we pass it down to our navigation options is actually via the screen props property so we can go ahead and just pass that down like so now looking at our default navigate two options if you're familiar with the react navigation you know this could also be a function that returns an object and as an argument to this we can use object destruction again and grab the screen props so now we could say the header tint color in the case where screens dot theme screen props rather screen props dot theme is equal to dark we'll go ahead and use white otherwise we'll go ahead and use two on two on two one which is our black color save this toggle it and we're not seeing anything yet because we haven't actually used this navilet theme so wait the way we'll use this is basically just replace this navigation call down here and we'll render that nav with theme now when we toggle this you see that our text disappears up here which means we are changing the color so I'll just go ahead and copy this row and we can change the header tint color to header style this is actually going to be an object alright and it's will use these same properties this time though we're going to set background color where if the theme is equal to dark we're actually going to use the black color otherwise we'll use the white now when we toggle this you can see I have a typo header style not header styles and now you can see those values changing so just about done let's go ahead and actually fix this toggle button so that it's we change colors with it so I'll actually go ahead and copy over these properties here because we'll use them we can go up to our toggle button and in addition to toggle themed we can grab at the actual theme itself and with the default react native button we could say color is equal to theme if the theme is equal to oops dark then we'll go ahead and render the white otherwise we'll render the black so now when I toggle this we can see our button is also changing colors alright one last thing what about this status bar obviously that's not very visible so we need to actually change that and to do that we'll go over to our theme manager from react native we're going to go ahead and import the status bar and basically we'll change the status bar color whenever we change the header color or the theme rather so to do that we can say status bar dot set bar style and when the theme is dark we'll want to use a light content and then when the theme is light will want to use a dark content so now we can go ahead and toggle it and you can see that the status bar changes as well so that we've got this fully multi theme that will allow us to hook into any component using context to easily grab whatever that current theme is so we could use the appropriate Styles I hope you found that lesson valuable if you want to implement a light mode in a dark mode which is getting more and more popular now that Mac OS has kind of really implemented that into their system as well so I hope you found that valuable if you have any questions please let me know and it was a pleasure working with you today

Channel: React Native School

Views: 9,316

Keywords:

Id: L6iIBkrMFUE

Length: 18min 3sec (1083 seconds)

Published: Tue Jul 28 2020