React Native Dark Theme | React Native Tutorial | Beginners

hello everyone welcome back to another react native video and today we going to implement dog theme in react native using Tailwind CSS so here is a very simple app and when I toggle the dog theme it turns our app into dark mode and you can see all the text turns into white when we have a dark background so if you find the video helpful do like the video and subscribe the channel and let's get started first you need to go to react native website and hit get started we'll be using Expo setup so let's just copy this command and move to terminal just copy this command and change the project name to react native do theme and hit enter this is going to take a couple of minutes to load all the boilet plate code and once it's done okay so it's completed now we can close the terminal and let me just drag the code here let's make room for our simulator let me just track the simulator here okay so this is our app and before we run the application we need to integrate tailin CSS so let's move to browser and open native in and here you need to go to export Tab and first of all we're going to install native in so let's just copy this name and write npm install native wind and then we're going to install tnd CSS but we'll be using a different version so let's just copy this and change the version 2 3.3.2 and hit enter okay so next we're going to run this command this will create a Tailwind configuration file so let's just copy and paste it here and this has created a Tailwind configuration file this is the file and next we're going to change the contents of the file so let's just copy this line from the documentation and paste it here these are basically the directories in which you can use DND classes so let's say you have a screen screens folder screens and you can specify here and that will mean you can use delin classes in this directory so you can specify all of your directories if you want next we're going to add the bble plugin so let's just copy this and move to bble configuration file and paste it here okay so that's it I think so our configuration should be completed and now we'll be able to use a Tailwind classes so this is our app comp component so let's just try to run our application using npm run IOS command like this and this is going to take a couple of seconds to build our application and once it's done okay so we have application and we have no errors that mean our table configuration was successful I hope so the way we can test it is just remove these Styles and add a class name and let's just add Flex one justify Center and item Center it shouldn't make any change because these were the Styles already implemented so if I change the background to Red 200 okay now you can see our classes are working and taable configuration is successful okay so next we're going to add a view for our doc mode switch so let's add a view and give it a class name of flex row justify Center and item Center and a spacing horizontal of two and let's add a text view inside this and give it a class name of text Excel and this will say toggle theme and next we're going to add a switch from react native so let's import switch component and the value for this let's say true for now and uh on change method will be an empty function and when I save this you will see a toggle switch here so it's currently on because we have a value true but we will change this later now let's use a color scheme object from native wind and we will have color scheme and a function to toggle the color scheme and we can get these values from use color scheme from native wi make sure you import this from native wind not from react native so let's import that and now we can use the color scheme here so we are only going to make this true when the color scheme is dark and for the on change method let's just use the toggle color scheme method in here and now when I save this and toggle this switch this should be working and this should be toggling the color scheme and the way we can confirm that is just console log the color scheme okay so by default you can see we have a light color scheme and when I turn turn it on this will turn to dark okay so our switch is working now we need to be able to change the Styles when the dark mode is on and the way we can do that is using the dark Closs name in Tailwind CSS so let's use the dark Closs name and after the colon let's use the style that will be applied in dark mode so when I turn on the dark mode you will see we have a neutral 900 background color like this so this way you can change the Styles in dark mode so now we can't see the text because they're already black so let's change them let's choose the dark class name and in Doc mode the text should be white so now when I turn on the doc theme you will see our toggle theme turns to White okay so next we're going to remove this text and we're going to have a dummy text here so let's move to the ipsum website and copy the text from this paragraph and let's just paste it here and now we're going to style it so let's add a class name and let's give it a margin horizontal of four and text justify and in the dark mode it's going to have a clause of text white and when I save this you will see we have a white text in the dark mode and when I toggle it it's black in the white mode so let's add our vertical spacing to this container like this now it looks good okay so almost all of the components are working in the light mode and dark mode but the text in the status bar is not working so next we're going to handle that and we're going to use a component status bar from Expo and we're going to give it a style based on color scheme when the color scheme is darkg it's going to have a light style otherwise it's going to have a dark style and let's close it and save it now it should be white in the dark mode mode so let's try to toggle it um maybe we need to refresh the app um oh okay so the status bar component was already being used so let's just remove this and now it should be working so when I toggle it they're going to be white in the dark mode and black in the light mode so similarly you can have other components and style them differently according to this dark mode so let's say you have a view and let's give it a height of 48 and width full and background of Sky 400 and when I save this you will see this View and it's not going to change when we toggle the theme but let's say we want to have a different background color when the do theme is on so let's add a dark clause and we're going to have a background of emerald 400 when the dog theme is on so let's save this and when I toggle the theme you will see the background of this container will change when the do mode is on so this way you can style dark mode and light mode using tail classes but let's say you want to do it with stylesheet so let's change the text color and for that we're going to have two different styles white text with a color of white and a black text with a color of black like this and now using our color scheme we can apply these sty so let's just remove this class and save it now when I toggle the Dark theme this text won't change because we just remove the classes so let's fix that using our stylesheet and based on this color scheme object if this is dark then we're going to apply the white text Styles otherwise we're going to apply the black textiles let's save this and now when I toggle the do theme you will see our text is working in the light mode and dark mode as well so this way you can Implement dark mode in Tailwind class is and even in the stylesheet so if you find this video helpful do like the video and subscribe the channel if you still have any questions about anything you can ask them into the comment section and I'll try to answer them as soon as possible so this is it for this video see you in the next one

Channel: Code With Nomi

Views: 12,620

Keywords: react native tutorial, react native ui design, react native tutorial for beginners, react native app, react tutorial, react native project, react native crash course, learn react native, react native ui, react vs react native, react native, react native expo, react native for beginners, javascript, react native vs flutter, react native cli tutorial, react js, reanimated, react native dark mode, react native dark theme, dark mode in react native, dark theme in react native

Id: 2MHBfatlC5g

Length: 9min 20sec (560 seconds)

Published: Mon Sep 25 2023