Dark Theme and Light Theme (Jetpack Compose)

in this video i'm going to show you how to set up the theming with jetpack compose and more specifically we're going to set up like dark theme light theme and how to toggle between them in real time so that's kind of the best thing about this the best thing in my opinion about the theming with jetpack compose is the fact that in real time at run time when the application is running you can click one button and the entire theme of the app will change every single composable gets updated if you click a button again you can choose another theme whole thing is updated so it makes it really really easy to toggle from light to dark or any other theme that you put into the project so just as an example i put a little button up here in the toolbar of the finished version of the app when i click this button it's going to toggle to dark theme so let me just click this notice boom it gets updated to dark theme if i click on any one of these recipes every single you know composable in the project is changed to dark theme if i click it back boom there we go we're back to light theme and again every single composable has also been updated first as always i think it's always good just to go and refer to the documentation that way at least you guys know like where to go for help if you want more information so here i'm at developer.android.com jetpack compose and themes and i'm just going to read kind of the introduction sort of paragraph here so jetpack compose makes it very easy to give your app a consistent look and feel by applying themes you can customize composer's implementation of material design to fit your product's brand if that doesn't suit your needs you can build a custom design system using composer's public apis so this is just like i said you can use the material design custom theme that jetpack compose has built in we can customize it or you can very easily build your own and through one click of a button switch your entire app to some kind of another theme really really really awesome way to design theming in my opinion lots of flexibility really really awesome also the guidelines which you'll see in this video like the the the tools that they have to help pick like your colors and colors that match those colors the fonts everything is just really i think well put together and lots of good information it's just good so we'll go through everything in this video as you can see i'm i'm a fan of it i think it's really great so uh let's let's get started so the first part of this process when you're gonna design a theme is you need to pick the colors you need to pick the fonts and uh i guess that's pretty much it you can pick shapes and like other stuff like that but that's configurable later it doesn't really matter the first thing is colors and fonts so in this video we're going to focus on focus on colors and you know toggle between light and dark theme and then in the next video we'll work on fonts so how do you choose your colors well there's actually a handy tool that we can use at on the material design website so material dot io and let's go take a look at that right now so if you're watching this on my website this link will be down below material dot io slash design slash color slash the color system.html and then scroll down to the section tools for picking colors again if you're watching this on my website there's gonna be a link down below if you're watching this on youtube sorry you're gonna have to type this out yourself so this section here tools for picking the colors down here we have this material palette generator so what this thing is is it's a tool with all of these i guess pre-built or colors that google has said work well together so the first step in this procedure is you want to choose kind of a primary color for your application and then it generates all of these other colors that either complement it or generally just look good with it so for us i've already chosen the primary colors and if you go to the source code for the project i have this colors file which we're going to be copying in later so i'm just going to grab this for reference this is the primary color that i've chosen for the project don't worry if you don't know what i'm looking at right now we're going to talk about that in a second so i'm just just copying that and i'm going to come over here and i'm going to paste that in whoops i don't want to grab the ff just everything after the ff so grab that paste that in this is the primary color that i've selected for the project and you could select any primary color like you could use this little tool over here you know that's what they want you to do you they want you to use this slider and use this tool select the color that you think is the primary color or i guess select a range of colors which you want and then it will tell you what the primary color is so see this p right here so if i wanted you know this set of colors it would say okay use this for your primary color if i wanted you know this set of colors it would say use this for your primary color if i wanted this set of colors it would say use this as your primary color i'm sure you get the idea the p means primary so the color that i've selected for our our project is this range of colors so 1 e 8 8 e e 5. that's the hex code for the color and the primary color as you can see here is the 600. if you're wondering what these numbers mean these are i guess numbers that are within the same range they're like different shades of the same color so chances are you're going to want to use these in your project with this being the primary color these numbers don't mean anything in particular like they're sort of arbitrary at least that's my understanding like this 700 doesn't mean that it's like 100 somehow higher in some way than this this one i don't think like if you look at the hex codes and you did the calculation i don't think that the difference between these is a hundred maybe it is maybe i'm wrong um i haven't done the calculation myself i probably should have actually but if you want to you can check that out it is as far as i know this is arbitrary it's just like a scale that you use for describing the colors that you choose so once you've chosen a primary color you then you want to get this into your project and that's what we have in this file right here so if you go to the source code for the project and you go to here i'll show you where it is in the source code presentation theme and then this color file you're going to want to go to this and just copy the whole file and i'll talk about these colors in just a second here so i'm just copying this i don't want to type it out so i'm just trying to save time and let's go to android studio go to presentation right click go to new package call this theme and then inside theme right click create a new kotlin file and call this color so now inside of color i just want to paste that stuff in so here as you can see i have blue 300 blue 400 blue 500 and so on and so on and blue 600 as you know is going to be our primary color so if we refer back to the color palette these are these colors here so literally all i did was you know click on this one and say okay i want to copy that i don't even know how you copy this actually now that i'm i'm clicking on this it's not letting me highlight it so i guess maybe you got to remember it uh yeah because i don't know it's not like letting me copy that but anyway so you just got to remember it 1e888e5 and then you would come in here and write like you know blue 600 equals color 1e88 e5 the ff at the front here is the alpha so ff is like it's um it's not transparent so the smaller this number is the more transparent it becomes so ff would be this is not transparent at all so notice all of these are have ff because none of them are transparent so after you've got the blue 600 in here then you would just get the blue 500 the blue 400 and whatever technically you don't need to get the other ones i just like to put them in here because i have like the whole color scheme in here that way if i had to you know refer to this it's quite easy i could very easily find another sort of color that is in line with my primary color so after that chances are you're going to want to grab like the complementary colors these these get known as the secondary colors in your project personally i didn't like these so i just left them i like the blues but i didn't like the oranges so i left them out so if you go to like our colors file you'll see like this one random teal one this is just like a teal color that i chose i thought about using it in the project i still might so i just put it in here i have a gray color that's going to be like the main background color and then i have a couple black colors here so a couple just different shades of of black and then here i have an error color so this is like a dark red and this is a slightly lighter red and these are the colors that we're going to use to theme our application i also want to update our colors.xml so this is the same colors xml file that you would have used like previously in android development before we have jetpack compose um it's just more convenient i think to also add these to here in case you got to use them somewhere else so also copy this file i'm sure you know how to get to it you just go to like resources scroll down go to values click on colors this is in the in the source code for the project so just copy this go back to android studio and let's add this into our project so resources values open up colors and ooh looks like i actually had a bunch in here from when i uh was playing around the project so you can just you can just paste over that and use this so all we need is like a black color a white color for easy reference we have the blue 300 to 800 which is the same ones that we have here in our colors file then we have that teal that i mentioned which is also in our colors file and then we have those two red colors darker red and a lighter red for errors so regarding the theming stuff with jetpack compose the xml file is not necessary like these are not used to design the theme with jetpack and pose i just like to have these as a reference kind of you know just if you happen to have to do something with xml it's easy they're already here also there is one thing that that jetpack compose cannot change and that's the status bar color and if you don't know what the status bar is it's this little bar up at the top here so it's not a toolbar it's not like the regular ui stuff it's this up here so jetpack compose cannot change that status bar color so we're gonna have to do it the old-fashioned way we're gonna have to update the styles.xml file and change that status bar color so that's what we'll do first actually so we have our colors our jetpack compose theming colors we have our xml colors so now go into styles.xml so go into theme or i guess it's in themes oh yeah that changed for jetpack compose also uh before you used to have a styles.xml file i believe that you used now we use a themes.xml and there's two of them there's one for day mode and one for night mode or light and dark theme so open up both of them open up the day one and open up the night one and we're going to change these to change that status bar color so it looks like i actually already have it in here android status bar color and it's set to blue 800 i must have um like accidentally added that ahead of time in the source code so if you don't have that just make sure to add that right here that's going to change the status bar color and all of these colors like color primary the primary variant these don't matter so these are in here you can delete those if you want because as you can see up here from this comment nothing here matters except the status bar color the theme is obtained from the theme.kt file and that's what we're going to build in this video so only thing that matters here is this status bar color right here now going to the night themes dot xml file also and you can get rid of all this too whoops get rid of all that also doesn't matter all that we need is the status bar color so now that we've changed the status bar color now we can move on to the jetpack compose theming stuff so generally what you want to do is go into your code and create some kind of a theming package for me i just named it theme inside of presentation now inside of theme right click go to new kotlin file and i like to create a file called theme or app theme or something like that i'm just going to call it theme and inside here we're going to define all the colors and also a composable that we can use in our project that uses whatever theme depending on like a boolean value or something so that was a lot i said a lot of things there so let's just do it and take a look and see what this looks like so first i'll define the light theme colors so private value light theme colors and set that equal to a constructor called light colors light colors is a constructor it's a color it returns a colors value so if i hold down control and i click on this if i go up to the very top this is a constructor inside of the colors class so the colors class takes a whole bunch of parameters a primary color a primary variant secondary color secondary variant background surface error primary secondary or on primary on secondary on background on service on air and is light so the primary is obviously your primary color the primary variant would be like a variation of that color so for us like we're choosing uh blue 600 for our primary so we could choose like blue 400 for our uh which which was the primary variant if you know you didn't have to choose a lighter one you could have chosen 800 700 300 you know whatever i just decided to choose that as the variant the other ones denote you know other things like like in the color palette we have that orange color this would probably be like a good secondary color to go with the blues that's why the color palette recommends it for us we're going to be using white because i like like light themes i like white i like whites i like i don't know clean stuff like mostly white stuff so that's what i'm gonna be doing but again i encourage you to you know play around with it and see whatever works for you uh background is obviously the background color surface would be like cards and toolbars and things like that that would be a surface color error obviously is for errors on primary so this is where it gets cool so on primary would be the color that goes on top of the primary color and jetpack compose will calculate this for you if you want to and i'm going to show you that later on on secondary is the color that goes on top of the secondary color think of when it comes to like these on colors think of like when you're writing text on top of that color what color would look good so that's what these kind of things are on backgrounds the color goes on the background on surfaces on surface on air anyway i'm sure you understand what's happening here so now let's go back down to our constructor i think it was light colors so all this does is it's just a like a quick way with some default values to build out one of those colors objects so that's what we are going to be using and of course the is light value is true here if you go down to the dark colors constructor it's pretty much the same other than is light is false so that's how we're going to be constructing our colors so i'm just going to copy paste this over because i don't think it's really useful for me to just sit here and write these out so just go to the source code grab the light theme colors actually grab the dark theme colors too and then we'll talk about that so just copying that going back to the source code pasting those in and now let's see what we got here so uh looks like i forgot to update the code again so this should be a black 2 that should be black 2 that should be black one and that should be black one and then get the color import here and get the dark colors imports and there we go okay so light theme colors i already talked about that i specified a primary color of blue 600 the variant is 400 my on primary so that means that like the text that goes on top of the primary color is going to be black my secondary color is white like i said and then the secondary variant i made that teal color again you should play around with this and see what looks good in your project you can use my colors for now but i encourage you later to just play around with these and like see what stuff looks like on secondary is the color that would go on to that secondary color errors and then you know background so what is the background the stuff that's behind everything the color that goes on background the colors of the surfaces the color that goes on top of the surfaces that's our light theme then if you take a look at the dark theme it's kind of like the inverse of that but you you generally what you want is your on colors will be white so like all of the text is going to be white and then everything else is like dark or black so for us i'm keeping the primary color but i changed it to be slightly darker so it's blue 700 my primary variant is white then my on primary is white because that would mean the text on the primary color is going to be white which is what you want in a dark theme secondary is black one lots of stuff is going to be black on secondary so the text on there is going to be white background is black basically is black so this is a slightly like lighter black black one is lighter than regular black so the darkest possible for the background is generally what you want and then also surfaces are generally lighter basically the the most important thing i think in a dark theme is your background color should be black your surfaces should be slightly lighter than that black and then the rest is sort of customizable other than you should probably make your text white so that's all great now how do we use these things and how do we like dynamically switch between these things well i like to create a composable which is what they do in like the google samples for jetpack compose so composable fun we'll call this app theme open this up and the constructor arguments it will take is a boolean named dark theme so boolean dark theme the second argument will be content and i'm going to explain this one after i write it all out it's going to be a composable so just writing composable whoops going to the next line and this will return nothing so now open this up and what are we going to put in here well we're going to use that material theme constructor or that material theme composable you haven't seen this before but this is how we essentially toggle between the themes we can pass fonts so if you take a look at this like you hold down control you'll see colors typography shapes and content so the colors we have just defined in this video in the next video we're going to do typography which is the font shapes are like how rounded you you want stuff or different shapes that you use you can basically create a shapes file just like we've created a colors file and we're going to be doing that i think in the next video also now what do we put for colors obviously we just do uh the one of the colors that we just created so for us we have to do an if statement if it's dark theme then we want to use our dark theme colors if it's if it's light theme so else we want to use our light theme colors and that is all you have to do and then inside of your material theme you just call your content and now every single thing inside of every composable in your application will get updated with either the dark theme colors or the light theme colors based on this boolean it's that easy so now how do we use this app theme composable well we want to go into whatever fragments we want well all of the fragments in the project actually so for us that's gonna be recipe list fragments and also recipe fragment so all we need to do is inside of set content before you do anything just call app theme and then pass whether you want this to be dark theme or light theme i'll say dark theme false for now just go to the next line and then inside of this this function this is where our content goes so if we take a look here this is the content by the way if you don't know there's a kotlin convention that the last argument in a function will get passed as a as a function or to the lambda here so like i could have done content equals and then put our content in here but then i can't i can't add that down at the bottom but instead if i don't add the content then i can put this down at the bottom that's just a calling convention so now what i want to do is put everything that was inside set content inside of that app theme so i'm just going to grab everything here literally every single thing and then just paste it inside here and now that will inherit inherit the um the theming from that app theme composable so maybe at this point let's just run it and take a look and see what that looks like i know we're not done yet we still need to be able to like you know toggle between themes but just for now we're gonna hard code it as light theme and just see what this looks like okay there's the app launching we have our blue status bar which we set in the themes.xml and there you go you can see that the colors are being applied we have that uh you know our white up here i think that was white before but i think that was hard-coded i think we should actually check that but this has changed like the buttons here are now a different blue color i think they were purple before and um yeah so there's not actually much colors that come through here so it's kind of hard to see but the text is white so like on the primary color is white the surface is white one thing i do want to make sure though is i think i hard-coded the color for the toolbar as white so let me go and take a look so let's go into it should be in the components go into search app bar and yeah so this is hard coded as white so to use the colors that you've defined in the theme remember before we were using material theme and then we would have access to the colors but they weren't configured before well now now all of these these are configured to be what we set them to so like this surface color is going to be what it was set to here this surface color right here which is white and it's the same for everything else so every other color here if i press dot we have primary secondary background all of those colors those are all the colors that are defined here so that's how we can customize our theme and like easily access them through this material theme so i'm going to call dot surface on this one because i want my surface to be white so also while we're in the search app bar i want to add a little button up here so that we can toggle between light and dark theme so scroll down down below it'll be a child inside of this row so let's go into this row scope and go down towards the second one i'm going to use constraint layout here so constraint layout and add a modifier add a modifier set that equal to modifier dot align and do alignment center vertically so the reason i'm using a constraint layout here is because i want this little icon to be in the far right hand corner here and i think an easy way to do this is to just use a constraint layout and then constrain it to the end of the parent i think that's just a simple way to do it there's obviously multiple ways to do the same thing it's up to you if you want to use this method or something else so say menu equals create reference now do uh we need to create an icon button so icon button this will take an on click function and also we need a modifier so modifier equals modifier dot constrain as then we pass that menu reference now inside here we can set up the constraint layout stuff so i can say n dot link to parent dot end then do top dot link to parent dot top and also bottom dot link to parent dot bottom so what that'll do is just link it to the end the top and the bottom so it'll be on the far right of the screen and then the composable that gets passed as a as input to this icon button will be an icon so i'm going to write icon and then do icons dot filled dot more vert so that's a vertical ellipses icon now we need something for this on click function we need a way to toggle the theme when we click this thing i'm going to create another function that gets passed as an argument called on toggle theme so copy that go up to the very top here and add another argument here called on toggle theme this will be a function that takes nothing and it returns nothing and that's how we're going to toggle the theme to light or dark so we almost have everything we need kind of set up to do you know the toggling between light and dark theme the problem now is here we have like a hard-coded in boolean and down below here we have a function so on toggle theme and we have nothing to like you know actually toggle the theme here so where where where's a good place to build functionality to toggle the theme between light and dark so generally speaking the best way to do this would be to like either save some kind of a flag in in the cache or the data store or you know that's shared preferences for those of you who don't know the data stores the new shared preferences so that would be the best way to do it but in this project you know this is a beginner project so we're not going to be using shared preferences we're not going to be using database caching so that's something that we're going to do in the next video so for now what we're going to do is just save the a global variable inside of the application class and then we'll use that to toggle back and forth between light and dark theme so let's go into our application class so scrolling down to base application and inside base application we will create a boolean that denotes light theme or dark theme so value is dark equals mutable state of whoops mutable state of and this will be false to start off because we're going to be in light mode to to start off i'll put a comment here that says should be saved in datastore or cache in a real app just so you know like because otherwise when the app restarts the you know whether it was in light theme or dark theme is just going to get reset so it's important to persist it across like application launches now function toggle we'll say toggle light theme i guess or toggle theme whatever you want to call it so is dark dot value and then just set that to not is whoops is is dark dot value so when you toggle it it's just going to change to whatever the opposite is now that we have this we can go into our recipe list fragment and up at the top here we're going to inject our application class so latent variable we're going to call it application and just do base application whoops base application remember this is provided by hilt so just to kind of remind you if you go up to the di package and go into the app module here we are providing the application context with this function right here so that means i can inject it into anything any anything that accepts things to be injected in that case we are injecting into recipe list fragment because i have my android entry point annotation so i'm injecting the application class of course also i could have got it through the activity like i could have done activity dot application that's another way that i could have got it but injecting it is also fine so i'm injecting it up here now that we have that i can go into our dark theme boolean here i can say application dot is dark theme so it just is dark oh is dark of value sorry so now that will denote whether it's in light theme or dark theme and then if we want to toggle that i want to go down into our on toggle theme function and say application dot toggle light theme and that's it so now that should do what we set out to do let's run this and take a look if we can toggle between light theme and dark theme okay there's the app launching looks like we're in light theme to start which is good that's what we said so let's uh let's just scroll around a little bit let's maybe click one of these now let's decide to toggle to the dark theme so boom there we go there's our dark theme now one thing is actually wrong about this you can see that this background is gray so that makes me think that i hard coded in the background color because that when you're using dark themes you notice that background that background should be black that's kind of like the convention with dark theme anything that's raised above the background should be slightly lighter so like this is a slightly lighter black and then this background should be darker so that makes me think that i hard coded in something so if i go to i go to maybe recipe list fragment and right let's see probably right here this box actually this box should have a modifier that changes the background color so here i have just fill maximum size here i should also do you know background and do color and do material theme material theme dot colors and then do background so background that should change it to that black color because if we refer back to our theme the background color oh this is wrong that's why this background color should oh sorry that's that's the light theme so dark theme colors the background is black so let's run that and take a look and see if that's correct now okay there's our light theme now let's switch over to dark theme there we go that looks much better so that's the convention with dark theme that's really like there's not much you need to know about dark theme basically it's just like the most the background should be dark black anything that's raised above that should be slightly lighter so that's why the cards are slightly lighter and then generally the text that's on anything should be white that's that's pretty much all there is to the conventions of dark theme so that's most of what you need to know regarding theming with jetpack compose it's quite a bit easier i would say than the old way to do theming you know this video is probably 20 to 25 minutes long and you mostly have everything you need to know about theming you can define your own color schemes oh actually one thing i didn't show you is how to define something other than light theme and dark theme so maybe i'll show you that really quick so if you wanted another color scheme other than like just light theme colors and dark theme colors all you would need to do is just do like value some other some other colors whatever you want to call it and just use a colors object get that import from the androidx compose material now all of the you know parameters here are the same as the parameters that we just looked at primary primary variant secondary and so on and so on so you would just define another color scheme here exactly like we did here and you could you know maybe instead of having a simple if else logic here for if it's dark theme or light theme you would have like a when statement that had different uh different themes that you could easily toggle between so it's really just super super flexible you can define any number of themes and very easily toggle between them at runtime very very cool so that is mostly it when it comes to you know colors dark theme light theme toggling between them at runtime that kind of thing and this is most of the theming stuff with jetpack compose the only stuff that we need to work on now is the typography so that's like fonts and then the shapes so how rounded are the cards maybe you have other shapes in your application for i don't know horizontal scrolling stuff like maybe you don't want them circles maybe you want them some other weird shapes anyway it doesn't matter what i'm trying to say is you just define like a global shapes class and we'll also be doing that in the next video now before you go don't forget your engagement if you came this far if you watched a 30 minute video or 25 minute video or whatever this is obviously you liked the video don't forget to go down there tell youtube that you liked the video and leave me some kind of engagement tell me how i helped you understand jetpack composed theming i don't know maybe i helped you blast off into theming and design your own special styles for your application something creative come up with something good and uh that'll make me happy thanks for watching and i will see you in the next video hey what are you still doing here the video is over well since you're still here i guess i'll show you the best android courses that exist on the planet i got all kinds of high quality courses if you scroll on down on the home page there's the jetpack compose one that you're watching right now there's that course we have mvi architecture if you've ever been curious about that we have my classic powerful android apps with jetpack architecture this shows you everything from well the focus on this one is pretty much database caching caching we get data from a real api we cache it we basically design an app to work when there's no network connection that is what this project is all about we have some ui testing another ui testing hilt which we actually went over in this course we got clean architecture this one's probably the best this is definitely the best course on my website if you are a professional or you are looking to get into the industry the skills that you learn in this course are absolutely fundamental this will give you a big edge in any job environments whether you're applying or you're already at a job and you want to just improve your skills this is a really really really high quality course it's hard your brain might explode while watching it but you will learn a lot you'll learn a lot of really really fundamental skills you know anything from getting data from the network caching data designing different layers abstracting out the different layers so you can write unit tests espresso tests so ui tests dagger navigation components everything it's beautiful definitely this is the best course on the website

Channel: CodingWithMitch

Views: 6,911

Keywords: jetpack compose theme, jetpack compose theming, jetpack compose dark theme, jetpack compose night theme, jetpack compose colors, jetpack compose theming example, jetpack compose theming tutorial

Id: oE4iCfS6Gso

Length: 31min 14sec (1874 seconds)

Published: Wed Jan 06 2021