Complete Dark & Light Theme in a React Native App (Multiple Switching Methods & Saving Theme)

in this video we are going to look at how to implement light and dark theme mode in a reactive application for the demonstration we are going to use this news feed app that we built so leave for this purpose I'll put a link to it in the description so you can check it out if you want this tutorial will be very packed we are going to look at how to toggle the theme using a switch how to select a particular theme using a button also we are going to look at how to change the theme based on the system theme chosen by the user and then make a continuous check to update our theme whenever the system theme changes and to conclude we'll look at how to persist the theme chosen by the user so that when the app starts it will be in a theme that there is already prefers some of the tools we'll be using include contest and async storage so let's get started so implementing dark mode in your application starts with preparation preparation towards having two sets of colors so for every color used in your live theme application you need to look for an opposite one which will be used for the Dark theme version due to this to be very convenient if you have one source of Truth for your colors so in this application we have all our colors under config and in a theme file so having the colors like so what you are going to do is that you're going to Define two objects and other colors one for dark and another for light so I'll start by defining a key for the light colors then after that you have one for the dark colors all the colors that we have here belong to our light theme so I can copy this and paste it under the light theme and for the Dark theme have a set of colors that I've defined already so I'll copy and paste them here just like so so we are using the same references to the colors just that the colors have been inverted to suit the Dark theme having the two sets of colors we can get rid of this but don't use to break the application so let's make some progress before we come back and get rid of it so with our colors defined like so we need to modify every component making use of colors so starting with our home screen we visit the home component over here we see that we are not making use of any color here but the main container here makes use of some colors so holding Ctrl I can click on the main container component to take me to the main container over here we start with the hypothetical theme for our components so let's say we have a theme object and then it is in the dark mode in this situation we want to alter our Active colors here to make use of the dark colors now since our colors here is an object what we can do is that we can pass the dark as a key to select this object of colors so over here we make use of the array notation and then pass the theme dot mode as the key to our Active colors doing that we see that instantly the colors we have here change one thing you should notice is that in this application we ensure that all our colors are applied using an inline style so even though at the bottom you have a style sheet here for any color that we want to toggle we kept it in line that's because outside this component the style sheet cannot assess the changes that will be making so that's very important now we need to do what we just did here for all our components using colors we have a few more components to change so feel free to skip ahead if you are not working on the exact same project so now we copy these two lines here and then go back to the home page now we've dealt with the main container already so let's move to the style text so we hit Ctrl and click on the start text and over here we see that you're having the Active colors here so we can select this and paste what we copied doing that should change the color of our text here now back to the home again the next component we have here is the new section so we hold Ctrl and click on new section over here we see that you are not using any colors but the news item being used here makes use of some colors so hit Ctrl again and click on the news item over here we scroll to the colors and paste what we have and just like that the card has changed to a darker theme now let's finish what we started so let's go back to the home over here we've adjusted the style test already so let's look at the explore section so we hit Ctrl and open the explore section and once again we are not using any colors here and the colors we are using are in the explore item now there's something about this component while we're creating it we kept it in mind that because of the darker background that you have for our text we don't need to toggle the color of the test whenever we switch between dark and lighting mode so what we did is that we set the colors in the style sheets here so in that case we don't need to adjust the colors based on the thin boot but since you have the dark and light colors now we can make it more specific and say that we want our colors from the light objects so over here we can see colors dot slight dot primary and we'll do the same for the Border color over here yeah just like so now on this page we still have some white here so let's look into that starting from the top that is the header of the stack Navigator of the home page so for that we can find it under Navigators and in the home stack over here we see our active Galaxy as well so let's select this and paste what we copied doing that should change the color of the header yeah just like so now our status bar didn't change with it and we'll talk about it a bit later let's fix the colors of the bottom tap so for that as well we go to our root stack and then we place the Active colors here with our objects and this should change the color as well yeah just like so now about the status bar here the status bar can be found in our main container so when we go back to the home we see that the first components we use is the main container and that's the situation for all our screens that's why we kept the status bar in the main container so let's visit this component again and over here we scroll to where we have our status bar yeah that's where we have it so now we're going to make a check here so for the value we are going to check for the theme so check if the theme dot mode is dark we return duck otherwise we retain light the dark and Lightyear refers to the content of the status bar so once we have that and the app is refreshed we see that the content is still dark that's because when the mode is dark you want the content to be light instead so this should be light and then the fallback value will be dark yeah just like so now when we click on the card it takes us to The Details page but while you received I will still have some issues to the colors so let's move on to that so under the screens we go to The Details page over here let's check the top at the top we make use of some colors here so let's paste what we copied yeah this should fix the colors for us as well going through the components we don't have any other thing to change for the colors now let's switch to the settings over here we see that you have some white here as well so let's visit the settings page on this page we find out the colors for our main container and we've also handled the colors for the star text already by the top we see that our colors are being used here so first let's replace this with our theme switch and we can see that the color of the switch here has changed now we need to do the switch for each of the components being used here so the first one is the settings item so let's visit the settings item over here we replace the colors here with our switch and this should adjust the components for us and then back on the details page the next thing we need to adjust is a settings button Now settings page instead the settings button that we have over here so basis settings button and replace the colors here with our switch and this should change the color here as well so for now we've changed all the colors based on the Dark theme and everything looks very nice so the selection of colors will depend on how you want your app to look in the dark mode and in the light mode if you want to make use of blacks in your dark mode you can do that but this is the color I prefer to use for this app now at this stage all we have done is to set the thing for the application locally in each component now this is in Practical so we have to find a way to keep this state here globally accessible in application and we are going to use context for that so to start with the contest we'll create a directory in our project for contests so create a folder and call it contest over here create a file and call it theme contest yeah just like so in this file will bring in create context hook here from react and then using this hook we'll create an export the context for theme so we Face the spots the contest that we are creating theme contest and record a great contest here just like so now to initialize the value of the context and how to update it let's go to the app.js over here we import the context that we just created so you go above the root stack and import the theme contest and using the provider of the context we want to wrap the root stack with it so theme contest you copy it and then record the provider of the theme contest and then we can wrap the rooster credit just like so for the Imports here we don't need them so let's get rid of them now for the initial value of the contest we'll make use of the states so let's import the use state from react here state from react and then in the function we initialize the state or call a state's theme and to have a set theme function now for the initial value of the state we'll use the value that we initialize in our other components so let's go to one of the components and copy that for instance we can go to the setting buttons page and copy this theme here so we can copy the object here and then back in the app.js we use it as the initial value now in addition to this we want to create a function that will be used to update the theme so call this function update theme we expect this function to receive the new theme to be set so to have new theme as the parameter now if we don't receive a value for the new theme we want to set the value of the theme based on the old theme so first let's check if we don't receive the value of new theme so if new theme is not received [Music] we want to set a new mode based on the theme here so the mode will be based on the theme dot mode so if the theme dot mode equals dark we want to toggle it back to light so we retain light otherwise we return dark instead yeah just like so let's declare the mode up here yeah now use this mode to create a new theme object so you assign a value to new theme this would be an object and we'll use the mode that we just set just like so and then after everything we can set the theme using the set theme function and we'll pass the new theme to it now use the theme and update theme as the values to the provider so use the value property and we'll pass the theme and then update theme yeah just like so now we need to consume this context in all our components using the colors so that we can get our theme value from the contest instead so let's first go to our home component over here we go to the main container which uses the colors then at the top we import the theme contest and then we bring in the use contest Hook from react now combine the two to get the value for theme here so just above the Active colors with the structure theme from the contest so quite a used context took and then we'll pass the theme contest then we can get rid of this line here so at this point we are getting the value for the theme from the contest so do the same for our other components so we can copy the two Imports here now for it to be easier for us to know that we are doing the right thing let's go to the context and change the mode to light so in the app.js file we change the theme to light and it should affect the container first great so back on the home page let's continue with the change so we are done with the main container so do the same for the style text here first to import the context in the use contest hook and then we'll discharge that theme from the contest and then we'll pass the theme contest so you can get rid of the theme Here and then you should be fine once again we are doing this for all the components so if this is not the same as the project you are working on you can skip ahead going back to the home screen the next thing on our list is the new section in the new section we go to the news item here and then we bring in the contest and the use contest hook just like so and above here we place the theme of the contest okay and you can get rid of that theme Here and we are good to go next we go back to the home screen again and the next thing you want to style is the explore section over here we visited the explore item and this is the component that we said we don't want to change the colors based on the theme so leave it as it is now tackle the header here and we can find that in the home stack so that's under Navigators so over here as well we're bringing our theme and I use contest hook and then where you have the colors we use the contest instead so today so pass the theme contest navigation of this now I have a problem with the input here that's because we don't need to go back twice to access the contest so we get rid of this and we should be fine now do the same thing for the bottom Taps and that will be in the root stack so over here we bring in the contest again yeah no not this so let's copy it from the homestuck yes they use contest and the theme contest and then we can paste it here now I'll tell you how about a theme we replace it with a contest just like so now I'll do the same thing for the details page so we go to the detail screen then at the top we bring in the two components we are using now this data here is useless so let's get rid of it and replace it with our inputs so over here we get the theme from the contest again you know pass the theme contest to it yeah and it looks good lastly we'll do this for the settings page so you go to the settings screen and at the top we bring in the contest and then use contest hook once again let's copy the input so we paste it here and then we get a theme again from the contest yeah just like so and then we visit each of the components here first we start with the settings item so for that components we can visit settings items place the inputs that we have here it's left with the use context from react so from a settings page we copy everything and then on the settings item page we paste it so at the top we get a contest once again and structure the theme so you use contest and a positive theme just like so now for the context we need to go back another step so let's add that yeah now let's copy this for the last component and that is the settings button so from the settings page you can visit settings button replace the Imports here and then with the structure our theme once again so that'll be the use contest and then we pass the theme contest with that said we can get rid of this and we are done with updating the theme with the contest now let's look at the first part of the toggling that is changing the theme using the switch that we have over here so to start that we head to the settings page and then we can close all the other tabs to make this cleaner now for the switch it can be found in one of the settings item here now the value of the switch is controlled by this is active State we have over here so at the top for this active State we want to change the initial value so instead of false we want to set the value based on the value of the current theme since we are calling this button dark mode meaning that the switch should be on that is to be in the true State when we are in the dark mode so we'll call the theme dot mode and check if the value is stuck so this will be our initial State for the switch to ensure that this is working let's negate this comparison so if I negate this we see that the switch toggles so let's undo it since it's working yeah just like so now in addition to the theme that you are getting from the contest you want to fetch the update theme function that will be used to update the contest so as a second value with this Charter update theme and then in the handle switch here which runs whenever we toggle the switch we'll call the update theme now since this is just toggling we don't want to pass any value to the update theme and just like that when you toggle the switch now the theme should change so let's try it and I will see that the theme changes and turning the Switchback off the theme reverses back to light now let's move to the buttons down here so these buttons can be found just beneath the switch here so you have the settings button for each of the items here starting with the first one we see that it also receives an extractive property whenever it's active is true we receive a check mark over here so for example if I change the value here to true you should see the check mark so now for the value of this it's active we want to base it once again on the theme that we are currently in so check for the current mode of the theme so we call theme dot mode now with this being the light button will compare it to light just like so and we see that has been checked already since we are truly in the light mode now I'll do the same for the other ones so we can copy the comparison here and paste it here with this we'll change it to dark now this button is for the system when we want to make automatic checks but work on it later now to toggle the theme using the buttons we use the unpressed property so first let's pass down press property to the light button with this will pass a function and for the function we retain the update theme function that we are getting from the context over here you want to pass a value to be used as the new theme so for this we'll pass an object and set the mode to light and we'll do something similar for the dark one so let's copy the whole and press here and we'll paste it here now change the mode from light to dark and now when I press on the dark button the theme should change to dark and pressing on the lights we are back to the light theme just like so now let's talk about the system option we have here with this we want the theme of the app to automatically adjust based on the theme that the user has selected for the device so this will dig into the settings of the device and change based on that theme so to deal with this first we want to introduce a new property into our theme object and that will be system so in addition to the mode we'll be having a system too so for this system button it should be active when a system property of the theme is true so we get rid of the force here and replace it with theme the system yeah just like so now when the button is pressed on just as we did for this you want to pass an unpressed property and the function will be similar to this and for this instead of the mode being dark we just pass the stem and sets the value to true make sure that it's a Boolean not a string yeah like so now when you press on the button nothing will happen and we'll get an error because we've not handled the system situation yet so let me refresh this to get back to where we were so to handle this let's go to our app.js file where we Define this function now over here in the update theme function we first check for when we receive the system property so in the else property of this that is if we receive the new theme value we'll check if the theme received has a system value if that's the case we'll handle the theme settings here now to be able to get the current theme of the device we need to use the appearance API from react native so at the top we import appearance from react native yeah just like so and then back here we get the system color scheme so create a variable for that system color scheme so to initialize this we'll call the appearance and then we'll call the method get color scheme yeah just like so for now let's alert this to see the value that we get so we are let the system color scheme and then over here we press on the button now we see that we get the theme light because the device is currently in light mode now based on the color scheme that we have here we want to set the value for the mode so for the value of the mode we'll check for the color scheme if the color scheme is dark we'll set the mode to dark otherwise we'll set it to light yeah just like so what is done we want to update the value of the new theme so now the new theme be assigned to an object and then we'll first spread the value that we received here so that will be the new theme and then we pass the mode to it we are doing this so that we retain the system property that was received but that's done pressing on the system button should toggle the theme based on the system theme yeah now the system theme is light so we see that the system is selected and we are in the light's theme but we have a problem here we want just one of these buttons to be active at a time so let's go to the settings page and make some changes now over here in addition to checking for the mode we want to ensure that the theme is not in system mode as well so for that we'll check for this and if the value for system is false so we negate the value here and I'll do the same for the dark button so we can copy this and paste it here and then indication should be gone now back in the app.js since you are working with the system value now when we set the theme for when we don't receive the value we want to set system to false as well and the situation will receive a value but was not triggered by the system want to update the value and set system to false so that would be the else part of the check here so we set new theme as an object and spread a new theme and then we set system to false yeah just like so when that's done let's go to the app.json and check for a very important property in the app.json let's search for if the user interface style has been set if it has been set in your project you have to ensure that it is automatic and not light so since I have light here I'll change it to automatic if you don't do this you will not be able to test the dark mode of your application while in development you only have to build the APK to be able to toggle the theme and for the changes to be applied to your app so with that done let's visit the settings of our device here so I have my settings here and I'll look for the settings to change the theme so for this device it's under display and I'll turn on the attack theme with that done let's go back to the app now the app is still in the light mode so let's refresh for the emulator you refresh by hitting Arrow twice it still didn't change so let's make sure we've selected system once we do that we see that the theme changes now we can go back to the light theme set it to Adaptive if you want and also change the theme based on the system now one nice thing we can add is that if I go to the settings right now and I change the theme back to light there is the need to refresh the app whenever I come back to the app now to be nice if the app can adjust automatically without having to refresh so let's see how we can do that for this we make use of the appearance API once again so let's go back to the updoor chairs so just below the updating function you want to monitor for changes so you can put your comment here so we monitor the system for theme change and then first of all we want to do this only if we are in the system mode so first we check if the theme is in system mode if you have it that way then we can proceed so call the appearance API and then you add an event listener so that'll be add change listener and this will take a function now this function will receive a parameter that would be the color scheme so we can destructure that from the parameters so that would be color scheme this will have a value as either light or dark based on the current theme of the system so once we have this we want to call the update theme function we have over here and then we pass an object to it first we set the system to true and then we'll set the mode to color scheme just like so once we save it it should start taking effect on the system now we know that system is in light mode since we change it in the setting now without touching anything here let's go and change it to dark so back in the settings we change the theme to dark and by the time you go back to the app it should change automatically to dark if you're in the system mode so as you can see we are not in the system mode so let's change it to the system mode and then let's go and change the theme again and then back to the app it should change to light yes exactly it might take a little while since the emulator is a bit slow compared to an actual device and once again let's try it again by changing it to dark and before we get to the app it should change to dark automatically just like so so we are making some steady progress here now let's observe something which will lead us to our next section when I hit R tries to refresh the app remember we are currently in the system state but let's see what happens when I refresh the app we see that the app starts in the light mode when we go to the settings everything has reverted to light so to keep this we want to find a way to purchase the theme that the user has selected in the app and to do that we'll make use of acing storage so let's head to the scene storage documentation so that we can install async storage so we copy the installation command here since we are on Expo we can copy the exploration and then we install it on our terminal or command line now in addition to acing storage we want to make use of the splash screen package so for this package we need to make the installation as well this is a package that help us to keep showing the splash screen to being able to fetch the stored theme so we install that as well with the two packages installed we can proceed now to start using the sync storage you want to Define some helper functions so under the config directory will create a file for async storage in this file we first import a sync storage yeah just like so now the first function you want to create is a function that we use to store data in the sync storage so call this function store data and we have to export it now with this function we'll expect to receive two properties a key and a value the key is What to be used to retrieve the value from the async storage and also you want to make this function async and then in this function we can open a try catch block now the AC storage can only be used to store strings so for any value that we receive we want to use Json to convert it to a string so we can call this Json value and for this you use Json and call the stringify method and then we can pass the value to it with that done we are going to call today's sync storage and then we'll call the set item method the first property to receive is the key and then for the value you pass the Json value just like so now in the catch block we receive the error here which has a message so we can destructure the message from the catch and over here we can just select it now Define other function which you will use for getting the data so we can copy and paste this and we'll change the name to get data now for this function we only need the key and in this case for the Json value we'll call the s in storage instead so you can copy the code here and paste it so we await the call to the scene storage and then recall get item and to the gate item will pass only the key now right after I receive the Json value we check if the value is now if it's not now then retain the value that you received so we call the return here and check if Json value is not equal to now if that's the case we'll pass the value we received using Json so we call json.pass and then we pass the Json value otherwise we'll just return now and we can get rid of the code here once again if we catch any message you can just alert it now with these helper functions in place let's go back to our app.js the first place you are going to use the async storage is in the update theme function so over here the concept is that once you're able to figure out the theme that the user wants in addition to storing it to the contest you want to store the value in the same storage so to do that we need our store data function so at the top let's import that so we can import store data from the async storage file we created the error here is coming up because after installing the packages I didn't restart the application so I'll create the server and start it again and now we see what we need to see so in the update theme function we'll go down to where we store the theme in the contest and just below it we call our store data over here we need a key so we can say news feed theme just like so and for the value we'll pass the new theme that you are storing here so now when we update the theme it will be stored in this thing storage as well now storing it is not enough to be able to have effect on the app whenever I run the application we need to make an extra check whenever we start the app so for that we'll create another function which we'll call fetch store theme so we can do that just before the return we'll call this fetch stored theme and to make this function on a sync one as well nowadays you open a try catch block just like we did earlier over here we just alert the message if we get any just like so now over here in the try we'll try and get the data from these things to which so we need our get data function as well so let's go to the top and add it to the Imports with that in place we can go to the try once again and fetch the data for the data we'll call it theme data and record a gets data method over here we'll pass the key which we can get from the update steam function so we can copy it so that we avoid any mistakes and then we paste it here now this is an async code so we can use their weight here once we have the theme we want to check if it's not empty so if you have a value for the theme that's if the theme data is true we want to update the theme by calling the update theme function foreign data we just received so we can copy it and paste it here yeah just like so now at this point we are not using this function yet so to be able to use it we want to use the use effect hook so at the top we can bring in the use effect Hook from react and then we can use this function just before the return is to take a function as well and then an empty array as a second parameter now we open this function here and then record the function to fetch the theme so we can copy the name and paste it here and then we call it now what we want to do is that we don't want to fetch this theme while the app is already open so you want to fetch it while we are still seeing the splash screen so that once the app opens is to be ready for the user to use so to be able to keep the splash screen on screen we need the splash screen component that we installed so at the top we import everything as the splash screen foreign splash screen yeah this one we have this line here because we have to put the US before the splash screen once you have that you are ready to use it so what you are going to do is that we'll call it just before the app so in this scenario we are trying to keep the splash screen while we fetch the other resources so you can put that here as a comment and to do that we call the splash screen foreign autohide function it is an async function once we save it and refresh the app we should see the splash screen so we can give it a try now we can see that we are stuck on the splash screen so what you are going to do is that we need to find a way to tell the app that we are done with the Fetch and that can only be done in the function that fetches the theme so in the function that fetches the theme we want to add another block that's the finale block so under the catch we add a finally so the finally here will contain something that will run after everything here is complete so if you catch an error we will not get to the finale but once the try is good and there is no error that finally will run so by here we'll call the splash screen again and this time we'll call the high desync function yeah just like so but to give it some extra room for it to settle let's use the set timeout function here so you can say a weight set timeout and this will take a function and return the splash screen to tie this ink here and for the time that you want to wait we'll say 1000. so this is a thousand milliseconds which is just one second but that's done we can save our work and we can give it a try and see if it works so right now we are in the lights team and when we go to the settings we see that the light theme is activated now let's toggle the Dark theme doing this you save it in the icing storage as well so now let's refresh the app and see if it will start in the dark theme so I'll hit r twice to refresh the app on refreshing the app we see that the app starts in a dark theme so meaning it kept in memory the previous theme that we were using and once we started the app it went to fetch it and this is the exact behavior that we expected so in this work we've seen multiple ways that we can use to toggle the theme of our application usually in your app you only have to implement just one of these so if you like the switch approach this is what you'll be using and if you like the buttons approach you can use this and if you want to base the theme on the system you can do that as well the resulting source code from the project will be available to my patrons and I'll put a link to that in the description leave a like on this video and let me know in the comments if you're able to follow this tutorial to get a dark and light theme to work in your application also if you faced any challenges let me know in the comments as well thanks for watching and you can check out any of the videos on your screen next for more to the point code

Channel: ToThePointCode

Views: 12,314

Keywords: tothepointcode, react native dark mode, react native dark, react native dark and light theme, react native dark mode switch, react native theme tutorial, dark and light theme react, saving dark theme react native, light & dark theme in react, dark and light theme in react native, light and dark theme project

Id: KZyUlaz7gCk

Length: 42min 48sec (2568 seconds)

Published: Mon Oct 31 2022