Designing Dark Theme/Dark Mode for Android Apps using Material Design - The Ultimate Guide!

my food designers and creatives hotel all doing well sis Chetan here from design color and I'm back again today with a very new exciting tutorial so this is by far my most favorite tutorial that I'll ever put out because it's all about d'amour so in this video we're gonna take a look at understanding the dark mode guidelines for designing dark mode or dark theme as Google calls it for material design Android apps so that any further ado let's get started alright so here I'm in figma and this is kind of like a layout that I put out with a couple of screens to show you guys the examples and show you how it's done I will design them from scratch so you don't have to worry about that all right so the other thing is about a couple of resources I want to talk about a couple of things that you guys should know beforehand so first of all this is material designs this is material design website where you can find all the guidelines regarding anything you want about material design and this is their dark-themed documentation so it's quite huge it's quite well as the highly suggest you guys check it out it's pretty well documented it's fantastic I leave all the links down within the description if you guys want to check it out alright up next is a medium article that I wrote recently it's been it's quite a popular article I know it's the only one out there which has extreme amount of documentation and examples and you know explaining all the concepts in detail it's quite big and it's got quite a lot of liking and I've also made these short mini tutorial kind of snippets on Instagram so you can definitely check that out as well it's instagram.com slash design underscore pilot so you guys can follow me and also I explained in detail give you guys examples and you know explain a lot of things it's it's pretty well it's it's kind of like another entire guidelines itself and I think you guys should definitely check it out okay so uh Plex is another small case study kind of a thing by Google of how they design the apps for their google apps all right it's it's it's pretty simple and straightforward shouldn't take you more than 10 minutes to read so definitely check that out as well the next one is the resources you will have to download a couple of these resources if you want to follow with the tutorial or even you know when you're designing your own app you know it has a different lot of components then you probably might want to use these kits so you can do this on Sketch figma or Adobe XD any stool is completely fine but Google gives the kits only for sketch and figma this is the delight and the dark mode kit this is only the light mode and this is for dark mode so I've downloaded the dark mode one our highly suggest you download that one as well the last one is a talk that Google gave at Google IO 2019 about how to design a talk team using material design guidelines you should definitely check that out as well they talked about a concept just not there in the material design guidelines they talked about it only in the video in the video but I've covered it in the talk in in my documentation in my medium article and also I will be covering it at the end of the video so stay tuned for that as well the next thing we want to talk about is colors so we're gonna be in using these this color palette generated a kind of a thing for picking colors we're gonna take take a look at elevation because it's a very important elevation play a crucial part and we're gonna be using an online color or contrast checker it's quite important as but and of course you can download this figma file down below the link will be in the description for you to check out in case you want to come back and revisit anything alright so let's get started so here I have a screen and here I have a small box with a color this is gonna be our primary color so every brand every app has a primary color and a secondary color and sometimes a tertiary color as well so in this case I'm using this hot pink color as a primary color obviously you can see that this is the light version and this is the tag word so want to delete this dark version and we're gonna build this from scratch so I'm gonna hold on alt or option with keyboard and then just drag and drop it and I'm gonna go ahead and call this dark okay so the first you go to do we're gonna change the status bar now this is gonna be done automatically by the phone itself so you don't have to do anything but to quickly get the dark mode version of this you can just delete that and you can go to the dark team material guideline you I kid that I was talking about you can go and you can pick it up from anywhere I'm just gonna go ahead and from here copy that and I'm gonna go ahead and paste it and put it on top so yeah that's done so the first thing to understand is the base color the base color has a color of one two one two one two it is not pure black it is just a dark gray no let's take a look at it in the guidelines so you can probably see here that it says the recommended dark-themed surface color is one two one two one two so that is gonna be the base color for the entire process alright so up next we have these two elements which is the top navigation and then we have a couple of cards and then we have this bottom navigation and then we also have a floating action button now what do you understand when it comes to material design is the concept of elevation now if I go ahead and you know just group all these together or I let me just go ahead and group all this together alright you can see that these kind of go behind the elements so these go behind the top navigation and they go behind the bottom navigation so it basically means that this is higher an elevation this is higher in elevation and this is lower in elevation all right so that's what you want to know so let's come here to this and let's take a look at this one so what you want to do is you want to go and select the bottom layers you want to change the fill color to one two one two one two always do that it starts with one two one two one two done so now if I click up click outside you can see that they all both they both have the exact same color all right but you want to create a sense of elevation and make it more standout so how do we do that so if you come down to the elevation part you can see that as the elevation increases the image on the Left becomes lighter and brighter alright because that lightness is expressed through an application of a semi-transparent overlay on the surface color so semi sense transparent overlay basically is a white color background with a reduced opacity alright and it kind of shows over here and you can actually see that over here alright that as the elevation increases you know the the surface becomes lighter to look at and they also give a certain level of elevation values and the respective transparency here so now this is the top navigation what is the elevation value for this now this is something that you can define all if you can stick to the material guidelines which if I go to the elevation values you can see that the top navigation alright has a elevation of 4 pixels D P stands for darts per inch right now DP can also be called as pixels in this case so 4 is what we need now for 4 if you want to just check that you can see that for DP elevation has an opacity of 9% so what I'm going to do is it will click on this plus icon now this is not available in Adobe XD so what you would want to do is you would want to make a duplicate of this layer alright and then change that to white color alright so I'm going to click on the plus and I'm going to create a white color and I'm gonna set the opacity to 9% alright so now you can see that there's a certain level of elevation that's happening and it kind of you know looks much better right now you can see the sense of depth alright we do the same thing for this one bottom navigation has an elevation of 8 pixels at 8 pixels I guess so bottom navigation bar 8 pixels so 8 pixels is 12 percent opacity so I'm going to select this one I'm gonna go ahead and set this to one two one two one two and I'm going to add click on the plus set the color of this to a solid color white and set this to I think it was 15% or 12% so I'm gonna set this to 12% alright so this is how it kind of looks fine now you want to just verify this you can go to the material design UI kit and you can go to the material components and you can see bottom navigation or here you can see that it is one two one two one two with 12 percent opacity for the white and for the top navbar which is over somewhere over here oh here yeah it is one two one two one two with nine percent opacity alright the next you wanna do is obviously you want to turn these from black to white so I'm gonna select all the elements that we have all that one shift and I'm gonna set the color of this to white perfect what about these let's actually take a look at the navbar all right so we can go to the GUI kits or here and here you can see that the top one is the first one is with a color the second one is basically white with 60% opacity so let's actually do that so I'm gonna select these two I'm gonna set this to white now set the opacity to 60% which is fine all right then there's also this kind of a line at the bottom all right it has a 12 percent opacity so basically any lines or borders or any separation elements in the in the design need to have an opacity of 12% and the color is gonna be set to white all right let's do the same thing for the bottom here as well now this again we can select this and this and this set the color of this to white and set this to 60% now obviously you can go and set it to 40% or 50% it's completely up to you but I'm just following what the guidelines say so the next one is these took these cards all right now in the original design you can see that there is a stroke and there is no fill so we can go ahead and apply the same concept so I'm gonna select each of these four elements right I'm going to remove the stroke and I'm gonna set the fill to one two one two one two all right well problem is it kind of blends in with the background so we want to create a sense of elevation so you can define any elevation but make sure it is less than 4 because the navbar is 4 and here it is less than 8 because the navbar is 8 so basically we want something below 4 if you look at the guidelines they give you an elevation of 1 pixel for carbs all right now you can use 3 as well you can set to 2 as well but in this case let's just go with 1 so if the pixel elevation is 1 which basically means that the white transparent overlay is 5 percent right so I'm gonna select and I'm going to add another layer of color all right and I've set this to 5 there we go and then I'm gonna go ahead and select 1 2 3 4 and I'm gonna set this to white color right so now you can see that this is more lighter because it's higher in elevation this is less lighter because it is lower in elevation and this is even more in lighter because this is even more higher in elevation alright I'm gonna go ahead and just wrap this up okay so then if you want to do is going to take a look at this color now in the light mode we can see that we have this you know bright color but in the dark mode it's quite dark and it's kind of hitting the ice so the concept of colors when it comes to material design is low saturation colors so let me explain what that means so if I come down to the color section over here you can see that a dark theme should avoid using saturated colors as they do not pass the accessibility guidelines which I will talk about saturated colors also produce optical vibrations again the dark powder which can cause eye strain so instead these saturated colors can be used for a more legible alternative so the material design gives you this kind of a palette in when I go ahead to this color system let's actually go and copy that color value I'm going to copy that and I'm going to come over here and then I'm going to go ahead and paste it so as you can see what happens it's gonna generate a color pallet for you with these boxes and certain numbers these numbers are called as tonal values all right and basically 900 means more saturation 50 means least saturation what we want to do is use something that's between the range of 300 250 so I'm going to go for 200 so you can just click and it's gonna copy it to the clipboard and I'm gonna come over here and let's actually make a duplicate of this alright this and I'm gonna paste it so this color is the primary color for light board and this color is the primary color for dock mode alright so that's what do you want to understand so I'm gonna go ahead and copy this color and I'm gonna come over here and then select these elements and go ahead and change the fill color to the less saturation all right we can come down you can do the same thing for these two as well all right now the we do have this floating action button I want to explain a certain concept a little bit later so for now I'm just going to go ahead and you know ignore that now there's another variation that we can do is I'm gonna duplicate this alright and here instead of making this filled I can actually delete those I can add in a stroke and I can make this white and add in an opacity of 12% all right so it kind of matches the same design but this is a personal preference and a choice you guys can go with whatever you want I honestly prefer this one because it feels tap about and looks much neater as well alright let's go to the next section over here so we have these two oh here now the material design gives us an option to optimize or change the color of the backgrounds to match the brand a little bit for example if you use Twitter it's not a complete black and white grayscale kind of a look it has that kind of a blueish midnight blue tint to it so how do you do this it's pretty simple and you can actually come down to the guidelines and I'll show you where it is it's quite down at the bottom over here alright so brand colors so it's pretty simple what you want to do is you want to select the color alright select the element and instead of giving a white overlay you apply the same color which is the primary color alright so you apply the primary color which is this not this one you apply this one which is for the light theme you apply that alright and you reduce the opacity alright so you want to make sure that the elevation values and the positives remain the same because this is higher in elevation there's gonna be 15% this is lower in elevation it's gonna be 12% there's going to be even higher in elevation so 15% so in this case this we can actually make this 18% if you want alright and yeah so that should be pretty much it so and the surface color again so here it was just one two one two one two but here it is one two one two one two and I've also added a little bit of background color of 6% so you can either go for this plane option or you can go for this option it's completely left to you all right let's move on next let's take another example over here alright so I'm gonna go ahead and just quickly delete this one me that and you're gonna focus on this one so here is the same concept alright so this is a site navigation bar so if you want to go if you want to pick up that element you can come down to the guidelines and you can pick it up over here right so navigation drawers alright I just copy that and paste it over here and if you want to check out the elevation values we can go to elevation and you can see that the navigation drawer has 16 pixel elevation and 16 pixel elevation if I come up over here is having 15 percent opacity alright so obviously if I selected this I have set the opacity to 15% okay let's actually do that from scratch you know what so I'm gonna move this up I'm gonna copy this dark thing alright and I'm gonna copy the element over here so I will copy this group and I'm gonna paste it fantastic alright so the first gonna do is we have these line dividers I'm gonna select all these line dividers all right just hold down shift alright and I'm gonna go change this to white all right and the opacity to 12% all right and obviously we want to change this to one two one two one two all right and let's add in that elevation color so I'm gonna set this to solid and it was how much 15% so I'm gonna set this to 15% alright that looks pretty good the next thing is these colors these text so I'm going to select these texts right and you want to go ahead and change this to white so this is 100% white now there is another option that material design guidelines gives you and I think you should use that because it is quite important and genuine so I'm gonna go and search for something all right over here so when light text appears on dark backgrounds it should use the following of passage levels so for high emphasis text 87% medium emphasis text 60% and text that is disabled which means text that the user cannot tap on or click on is 38% so in this case these top titles have a high emphasis so I'm going to set this to 87 percent all right sorry 87% now obviously you can go ahead and set that to 100% as well but in this case I'm going to set it to 87 so I'm so that you guys understand the concept the other ones are secondary in nature which are medium emphasis so I'm gonna set that to white but I'm gonna go set the opacity to 60% which already is 60% as well so now it looks something like this we wanna do the same thing for this as well just set this to white and 60% capacity fantastic what about this text all right we can go ahead and use the one which is the light front the dark primary color so I'm just gonna press I on my keyboard to get the eyedropper and I'm gonna click and it's gonna automatically apply that color for me all right so this looks pretty good and this is just another example now one thing I mentioned is about drop shadows all right so I wanna explain the concept over here if we scroll a bit up so as you can see you hear when the elevation increases on the left side you can see a big amount of drop shadow on the right side you can see the bigger more optional now one concept you need to understand is that the amount of drop shadow does not change at all the drop shadow values will remain the same in both the modes so in this case here I've not added any drop shadow for this element right but we can go ahead and add in the shadow values now this was for pixel elevation so I can go to the material theme guidelines I can go to here and to the third page and here I can see elevation values all right so I'm gonna go for the one that is the one that has 4 DP all right I'm going to click on that and it gives me these drop shadow values so I'm just gonna go ahead and hold down shift I'm gonna copy these all right and I'll come over here and I'm gonna paste them alright so now you can see the not sure if you guys can see it but you can see a slight amount of shadow over here do the same thing for this as well now I've already applied some shadows so I'm just gonna delete the existing ones and I'm going to create new ones all right pretty good now for the other one which is the bottom Ravin it has 8 pixel elevation so I'm gonna go and take these values all right copy that come over here and it already has some values I'm going to delete this one and apply them from scratch do the same thing here as well and apply them from scratch right now this already has certain level of drop shadow for the navigation bar so I'm going to leave it as it is all right fantastic so the next one is about the same brand color you know so we added a brand color over here you can do the same thing over here now but when you have text all right one thing you wanna understand is about accessibility accessibility basically is a concept that defines the ability of somebody to read the text so there is a guideline which is neat which needs to be used by every single app built all right and there is a contrast ratio so I'm going to talk about that so if I come here and search for accessibility it says that the primary colors are D saturated so that they passed the w/e WCAG which is the web content accessibility guidelines of at least four point one four point five is to one ratio at all elevation levels so basically what I mean to say is let's go ahead and create a rectangle all right and here in the online contrast checker I'm going to go ahead and assign two colors one is the foreground what is the background now this is the background right so I'm gonna press I on my keyboard and I'm going to click here and that's gonna give me this new color value I'm gonna copy this now if I click over here it gives me two separate values so combining them together I get this color so I'm gonna go ahead and to the background I'm gonna press control V and paste it all right and for the foreground we have this pink color I'm gonna copy this and I'm gonna go ahead and paste it so now you can see that it passes the contrast ratio of 4.5 is to 1 because we have a contrast ratio of 8.2 is to 1 and whenever you are changing the opacity values of this you want to make sure that the contrast ratio is met all right that's really important so let's say we set this to something like 70 all right we have something that's quite bright now if I click on this I'm gonna press I I'm gonna click I'm gonna copy this color and in the background if I go and said you can see it's below 4.5 s21 which is why it feels all the guidelines all right so you want to make sure that you have picked the right color and the light right level of elevation and opacity all right it's quite important alright so the next step is the floating action button so this is going to be my secondary color or indices in this case we can say it's a primary color so I'm going to go ahead and just create a color swatch like this alright I'm gonna press I and then just copy that color fantastic now I've already made this into daf mode so to copy this color alright and I'm gonna come to the color system over here and I'm going to make this as a secondary color for just purpose of explanation and oh yeah so we get this tonal value chart again this time my color has a total value of 700 but obviously because we are using doc mode we want something between the range of 400 to 50 so I'm gonna go for 200 so as you can see 200 is b4 for 9 ef-0 and I've gone ahead and added this one which is actually the 300 tonal value all right so if I copy that and if I paste it it's the same thing so 300 tonal value right now you can also use another option which is this one all right so to give you an example what I'm trying to say is I'm going to come down and over here it says that to retain the brand identity brand colors can be used at full saturation alright which is our this primary color can be used throughout the application but should be limited to one or two branded elements such as a logo or a brand button in this case they're floating action button looks kind of different so they've used it over here alright on the bottom right corner as you can see they've used the 501 ideally they were supposed to use this one but for small elements you can use it over here so you can go with this option as well or another one is if this was your primary color now now in this case I would prefer this one because it looks easier to look at but if this was my primary color I would obviously go for this one because this is more nice to look at than this one alright so yeah now another thing you won't understand is you can see over here that this is the background color which is the primary color on that we have an icon which is white in color but here why isn't this white color I mean you could change that I mean this looks fine right or even if this doesn't look fine I mean this would look fine right so here's the concept there is something called as on colors alright and there is something called as a baseline palette I'm gonna explain that so I will come up to here alright so the dark team baseline palette so it lists all these lists of colors and kind of like a guideline so in dark mode this is my primary color which is this one alright I'm actually gonna go ahead and make a duplicate of this and I'm gonna pick this color right so this is my primary color for Doc mode the primary variant which is actually the dark mode for light theme becomes the primary variant for dark theme alright so it's okay if you guys didn't understand that and then we have a secondary color which also has a tonal value of 200 we have the background color and surface color which is one two one two one two we have the arrow color I'll explain that next alright and here we have something on as on primary on secondary on error on surface and on background so what are these so any element let's say for a text or an icon and ended in our case we have an icon or oh here any element that is on a primary surface now our primary surface is this this is our primary surface any element on our primer surface needs to be black in color alright so here this is our element which is on a primary surface needs to be black but not white so if I come down over here you can actually see this is for light mode on the left and this is for dark mode on the right so on primary alright is white color in light mode but on dark mode is black alright so that's one thing you want to understand about now if I go up over here again an X plane let's see on background and on surface on background and on surface is this black color which is supposed to be white which is white so as you can see 1 2 1 2 1 2 was our background surface color and on that we have white all right so that's one thing one understand alright moving on next we have this alright so this was another simple idea that I took this is basically to explain States all right button States so it's quite simple we have light 1 we have a dark one I change the opacity to 12% I made these white color I made this 60% and any text that is disabled as we mentioned before is 38% so we have 87 for high emphasis 60% for mid emphasis and 38 for disabled text now here in this button alright we have this which is around 12 pixels sorry 12% opacity and the text here as a black color with 38% opacity but in light mode sorry but in dark mode is different if you come down all to the bottom you can see over here so disabled States so here in the disabled state we have two options either with stroke or either without stroke alright so let's take the option with stroke so you can see that the fill container is 12 percent white so I've gone ahead and set the white color to 12% alright and the label or the icon is 38% so I've gone ahead and set this to 38% white very simple and over here you can see that I've added a stroke and this stroke alright as you can see outlined container is 12% white which is this so I've gone ahead and set this to 12% very simple very straightforward next up we have error States now this color let me actually go ahead and show you error so in light theme we see that the error color is B double zero zero to zero so I've gone ahead and set that to the same color but on dark mode it's quite different but how does it look in dark mode so in dark mode you can see that it says that you take the light theme error color which is at the bottom alright and on top of that you add an a 40% white overlay so I've going to take on this and here this is 100% and on that I've added a 40% white overlay now is this tech supposed to be white or black let's check that out so if I come down or actually go up all right the color on an error color is black so the color on the error color is black all right so that is pretty much it now there are a couple of other things which I will not be explained because it's a very straightforward which is about hover State and stuff it's very simple so on how our state you add a 4% elevation on a focus State you add a 12 pixel sorry not 12 percent of overlay elevation it's quite simple and straightforward right you can actually also check those out in the material design UI kit everything is over here it's super simple and easy to understand if you understand if you understood so far you can understand that as well you also have snack bars which is very simple and easy to understand should not be an issue now one thing they didn't speak about is illustrations in the guidelines so in illustrations we have the right theme and we have the dog thing so basically what you want to do is you want to split it into two parts one is going to be the subject and one is going to be the background now in this case the subject is gonna be this girl reading the book and the background is gonna be the books and it's kind of a squiggly thing so we're going to look at it is simple so for the background element you need to make it grayscale all right but while doing that you need to follow us improve the lightest shade in the light theme becomes a darker shade in the dark team all right so in this case this squiggly thing has a lighter green color but here the books has a darker color so we want to inverse that so it's gonna happen is this is going to become dark as you can see it's more dot which is why you can't see it quite well and this which is dark becomes lighter which is why you can see it so basically you want to go ahead and interchange and make them black and white what about this curve so down here you can see that all the colors have to be d saturated it's as simple as that so here this book has you know kind of in total value of 800 so I went ahead took that color put the color system and picked out the 200 color and I went ahead and applied that but the other colors such as her pant shirt hands fees you know hair and shoes all fall under the tonal value of 350 so I left it as it is the only thing that changed was the book because it has a tonal value of 800 so that's pretty much it on designing for dark mode now the other thing you can do is check out a couple of resources that I mentioned here as well you can't find a sticker sheet which isn't dark mode actually but this is for XD alright and there is a small sample file given by Google as well you can download that over there and how to implement dark mode there's a separate video all about that you can check that in this video you can also check it out on YouTube you could just search for that it should be out there somewhere so that's pretty much it for this video guys thank you guys so much for watching because really enjoyed it if you did lemon in the comment sections down below make sure leave a like and subscribe to the channel for more amazing awesome content and celina see you guys in my next video take care and bye bye you [Music]

Channel: Design Pilot

Views: 18,713

Keywords: dark theme, dark mode, dark mode instagram, dark mode ios 13, dark theme android, ui design tutorial, ui design, dark ui design, ui dark mode, dark ui theme android, dark mode android instagram, material design, material design tutorial, dark mode apps, android 10 dark mode, google material design, material design 2019 android, ui design principles, ui design adobe xd, material design guidelines, design course dark mode, dark mode ui design, dark theme ui design

Id: FSxgFKlbV9Y

Length: 32min 16sec (1936 seconds)

Published: Sun Nov 17 2019