Complete React Native Tutorial #5 - Light and Dark Themes

Key Takeaways

All right then, gang. We're making some good progress and we've learned about making pages, a few native components that we can use for templates. We've seen how to navigate between different pages and also how to use a layout file and the stat component as well. So, we've covered quite a lot of ground already. In this lesson, I want to introduce you to the concept of having a light and a dark theme for the application, which kicks in based on your device settings. So, for example, on an iPhone, you can manually set the device to either a light or a dark theme. And then inside this React Native app that we're building, we can access that setting to determine a user's preference and then use it to show either a light or dark theme for the application, too. Now, if you take a look inside the app.json JSON file, you can actually see an option called user interface style where we can override the device setting for the sake of developing and testing the application. So right now it's set to light, but we could change this to be dark and then we'd be able to access that value within the app and conditionally style things differently. Now if we changed the value right now and previewed the app, then nothing would change in the app because we're not actually using that value anywhere. So visually everything's still the same. But that's what we're going to do now by using a special hook that React Native gives to us called use color scheme. So let's go back to the layout file and style the page headers using that hook. And we're going to use the hook inside the component above where we return the template by saying const. I'm going to call this color scheme. We set that equal to use color scheme. And if you click on the option right here which pops up, then it should import that hook for you from React Native. Okay, so this hook should return either light or dark. And in some occasions, it could also return a null value, but generally speaking, it should either be the string light or dark. Now, I'm actually just going to log this value to the console right now inside this layout so that we can see what the value currently is. And when we do that and open up the terminal, I'm going to see that the current value is light. Now, if you open up the app.json file and change the user interface value to dark and save it, we're not automatically going to see that new value in the console. But if we refresh the app by shaking the phone and selecting reload, then eventually we should see that new dark value in the terminal. Okay. So now we're accessing the device mode or color scheme if you like. And now we can use it to conditionally style the app into a light or dark mode. So before we start doing that, I actually want to make a new file to store a bunch of different theme colors in, which we can then just reference from the layout file and also from any other components we make in the future that need styling using those colors. Now to do this, I'm going to make a new folder called constants, which is a folder I like to make to store any global app constants inside of. And in that folder, I'm going to make a new file called colors.js js to store all of the different theme colors in. Now, instead of me writing out all of these from scratch, I'm just going to copy them from the course files and paste them in right here. And as you can see, we have just a single object called colors, which we export. And inside the object, we've got a light property, which is an object that contains a bunch of different colors for the light theme, for all these different things. And we've also got a dark property with the same structure, but different colors, which we'll use for the dark theme. Now, the property names inside these two themes are not important. They're just names I came up with, which I thought were pretty descriptive, but you could have whatever properties and values that you want inside these things. We've also got two other properties up here as well called primary, which is going to be a primary color for UI elements in the app like buttons. That's a purple color. And also the warning color, which is like a pinky red for any errors that we display. And both of these two colors are going to be used for light and dark themes together. they're not going to change, which is why they're up here on their own outside the light and dark objects. Okay, so now we have this colors object and we can import it into any component that we want to style using those theme colors. So let's do that now inside the layout file. Okay, so let me first of all paste in the colors import up here so we can use it. And that comes from one level up, which is why we have the double dots, then into the constants folder and then colors. And now I want to select the current theme from the colors object down here by saying const theme is equal to colors which we just imported. Then square brackets and then the value of the color scheme. So remember that should be either light or dark. Right? If it's light then we're selecting the light property from the colors object which contains all the light colors. And if it's dark we're selecting that dark property from the colors object and that contains all the dark colors. Now like I said before this value could also be null. So in that case we could use the nullish coalesing operator which is a double question mark to provide a fallback default scheme which we'll say is just colors. And that means if for whatever reason we can't access the device scheme and this hook returns null then we'll use the colors in the light theme as a fallback. Okay. So now this theme constant will reference either the light or the dark property on the colors object. And so therefore on this theme value we have access to all of those different theme color properties within the light and dark objects like the background or the nav background or text color icon color and so forth. So let's try using some of those different theme color properties in the layout file. I'm going to style the header from the stack to have the background color plucked from the theme object. So the value should be theme.nav background. Also we'll update the header tint color as well. And the value of that should be just theme.title. And that is another property we defined. Awesome. Now let's try this out. And yeah, we can see that dark background up here now. So it's using colors from the dark palette. And that's because if we open up uh this app.json file, we have dark right here. Now, if I change this to light and save it, we are going to need to refresh the app. So, let's do that. We'll reload it, but then we should see a different background color up here and a different tint color. And that's because we're now in light mode and we're using the light palette. Awesome. So, that's going to apply to every page that has that navbar thing at the top. So, if we go to these other pages, yeah, we can see it still works. Um, if I change this back to dark just to make sure it works for the other pages as well. Let me refresh this again. And then if we go to about. Yeah, that works. And if we go to contact. Yeah. So, it's applying now across the whole kind of spectrum. All right. So, now what you could do if you wanted to is you could go to different pages and style them the same way. So, let me close a few of these down. And what I'm going to do is go to the about page of here and do something similar to style these for light and dark. So if we go to the layout, what I'm going to do is copy this import because we're going to need this. And I'll paste it over here. And then we're also going to need the use color scheme thing, but we'll import that manually in a second. I'm going to copy these two things so we can access the color scheme like so. And then up here we need to import the use color scheme hook. All right. So now we could use this theme to style things in line. Now we can't access this down here in the stylesheet because we make it within this component, right? And the stylesheet is down here. So we have to do these in line for now. But you saw before we could just add an array here if we wanted to like so to apply additional inline styles as well as this container. So I could add an object right here and I could say that the background color is going to be the theme dot background. Was it background color? Let me have a look inside the colors. It was just background. So theme do background. Take away that color bit. All right. And I could do the same for text. Um I could add another style here which would be theme.ext. Let me save it just to make sure this works. And then we'll go to the contact page. And oh, not the contact, sorry. It's the about page, isn't it? Let's do that. Yeah, we can see that now we've got the dark background. But if we open up the app.json file and change this to light, and then we're going to need to refresh the app. So, reload. And then we'll go back to the about page. We can see now it's the light background. So, it's automatically changing those styles based on the value of this user interface style which a user can set on their phone. That's their preference, right? Okay, cool. Now, you might have actually noticed something as well. If I change this to dark and reload this app, so the header becomes dark. Now, look at these things up here. You see this is dark text and the battery is dark and this internet symbol is dark. Well, we don't really want that, do we? And we kind of want this little bit of status bar up here to auto color itself based on well if we have dark mode or if we have light mode. And we can do that pretty simply. All we have to do is come to the layout and I'm going to wrap this thing in a fragment because we must have one root element when we return a JSX template. So let me wrap this in a fragment because I also want to within this add another one which is going to be a status bar component and that comes from expo status bar over here. So let's import that and then we can just add a prop which is called value and we're going to set that to be auto and then it's going to auto update over here. You can see it's gone light now which is awesome. But then if I change to dark mode, if I come over here, sorry, if I change to light mode again, we're already in dark and save it and then restart the app like so, then you can see it becomes dark on a light background. So that's nice. Okay, so we've seen how to use this use color scheme hook to grab the user scheme setting value and we've used that to select a color palette we can style components with. And this is really cool. But in the case of this about page, it's just looking a little bit messy really. And if you think we'd have to do this for each and every text component or view component or other native component that we might use, then you can imagine it's going to get even messier. So what I like to do instead is make some common basic reusable themed components which conditionally apply these light and dark themes to them. And then we can just drop those into the page components where we need them. And that keeps everything much tidier and easier to manage. So once I've stopped recording, I'm going to remove all of this theme stuff from the about page. And then in the next lesson, we'll make those reusable drop in themed components instead.