Designing Dark Mode for iOS Apps - Tutorial

hidden my fellow designers and creatives hope we're all doing well see Steven here from design palette and I'm back again today with a very new exciting tutorial in this tutorial I'm gonna show you how to design dock mode for your iOS apps we're gonna be using the human interface guidelines so you want to go through every single thing one by one so without any further ado all that get started alright guys here we are in Sigma now before we get started with everything a couple of things that I wanted to mention first is you can download this um exercise file template from the link in the description it's gonna be a Gumroad link just click on that and you can download this figma file and you can import it into figma it basically has two files one is the uikit itself which Apple has provided and the other one is the exercise files which I'm going to be using to demonstrate how to design dock mode for iOS alright alright so the next thing is I also have a tutorial on designing dock mode for Android apps using material design it's one of the best of it's it's really popular tutorial as you can see it's got around three thousand five use it's doing pretty well and I explained in complete detail how to design dark more for Android so definitely do check that out I also have a medium article on this and this is supposed to be one of the most popular tutorials or articles on designing dock mode for Android out there so definitely do check it out it's been quite well as you can see it's got two thousand four hundred claps it's pretty awesome and amazing definitely check that out and regarding iOS I also released an article recently on designing talk mode for iOS basically what I'm gonna be showing you in this video is basically explained in a in original format over here so definitely do check that out as well now the other thing is if you go to the human interface guidelines website by Apple and go to the resources section you can see that there are a US UI kits we have for Adobe XD you have a sketch and we have a Photoshop but unfortunately we don't have the UI kit for figma so there are two things that you can do one is equal you can either download the sketch version and import that while it does not import perfectly it does import the sketch file to a decent extent which you can use so that is one option the other option is if you would want a proper UI kit you can come to apply pixels calm and you can get the iOS 13 UI kit which is therefore figma which I myself created you know for the guys at apply pixels so you can check that out as well if you want to buy it and there are there they also have a thumbs up and they also have tons of other resources so if you guys are interested you can definitely get that as well alright without any further ado let's get into the tutorial so the way we will go through this is I'm going to show you one screen at a time and then we are going to and then I'm gonna explain how the guidelines actually work alright cool so let me just take these screens and then and just move these out to the side so we can focus on one screen at a time all right I'm just gonna select this and I'm going to press control D or command T and I'm just gonna call this one underscore darks and oh wait no it's the dark potion alright so the first thing I want to do is you want to change the background color the base color alright and as per the guidelines if you see over here what you can see is you have system backgrounds and you have primary system background secondary and tertiary system background you've got light you've got base and you have got elevated for us we are going to be looking at only these alright the elevated States can be used only if required but I will explain the difference between base and elevated as well alright so in the light mode you can see that the color is complete pitch white in light mode and so in Dartmoor it becomes completely black alright so this is the black color so what so what we're gonna do is I'm going to come over here and I'm gonna go and in the fill I'm gonna set that to be completely black alright that's what we have now we also have a lot of text also alright so now we have something that looks like this and we go to edit you know all this so the person is we have this text alright which is the main title and that is completely black so if I come to the duck team UIKit and come over here to this side which says label colors so basically label colors are used for text elements only anything that is text would use a label color so in light mode you can see that it's completely black and in dark mode it's completely white so which is ffffff so what we gonna do is gonna come to the exercise files and we're gonna select all the elements all right all the titles that have black color alright i'm gonna select all that and one by one just go select all this and i'm gonna change the color of this to be white all right perfect there you go great now we also have this subtext which is basically the secondary level our text which is secondary level in the hierarchy so you've got primary and then you've got secondary so in light mode you can see it is 3 C 3 C 4 3 with 60% and in dark mode it is EB EB f5 with 60% so I'm just going to copy this color code right and I'm gonna select all the elements which are basically secondary in nature alright which is basically the texts and also we can you know take the time element as well time text alright and I'm gonna change the color of this and that should be 60% if you take a look at it we've got 60% alright fantastic ok so now we have I just did this masking effect so I'm just gonna select all these elements alright and I'm just gonna go and set this to black right and that's much better okay next is we have these blue color texts now one thing that you need to know is if I come over here you can see that the iOS gives quite a lot of colors to choose from we've got 1 2 3 4 5 6 7 8 9 right so let's come here to this one let's say the system blue the system blue color in light mode is a little bit different than the system blue in dark mode so if you see dark mode it is 0 8 8 4 FF but in light mode it's a different value altogether so what I've done here is I've used the color over here which is blue color for this and what I can do is for dark mode I can actually choose this blue color copy that it's a very subtle change so I can select every element that has this blue color alright and I can go ahead and change this to you know the color that we want which is for dark mode and it's a very subtle change but you can have it now this again I'm not gonna change that this is a completely different color altogether I think this is the teal color over here alright system teal alright I know it's a different color that I've chosen so what we can do is we can just ignore that as it is but if you want you can definitely go ahead and change it alright the next thing is we have these lines alright which are you know kind of like dividers I'm gonna select all of these right okay and if I come to the uikit all right you've got this section which is called separator lines all right now you've got two versions of this one is opaque which means that the opacity is 100% and the other one is non opaque which is 65 percent so you would you want to use non opaque in case multiple separate lines are overlapping but in our case since none of them are overlapping we could just use the one with the opaque coercion so I'm going to copy that color code I'm gonna come to the exercise files and I'm gonna paste that over here and and make sure that this is 100% alright so now we can see a bit about little bit of separation over here fantastic now we can also select these tick marks that we that we have all right and yeah I think those are the ones and we could make sure that the color of this is different so the color for that would be we could use the same secondary text color alright or as I mentioned since secondary since text is only for label we can use fill colors right so let me just go ahead and delete these so any element that is not a text alright can be given a color from the fill color alright so maybe we could give primary or a secondary I think even give primary so I'm gonna copy this color code and I'm gonna come over here and then just paste that over there and here what we can do is we can set the opacity to 36 all right there you go so this looks much much better alright so now we've got this top status bar which is in light mode now obviously we would want a dark mode version for it now obviously you can go ahead and change the color of this but if you have the uikit you can actually take it from there so I actually have the uikit from applied pixels com if you don't have it you can you can download the sketch version over from here and import that into figma anyway so I'm gonna go over here and we have bar so I'm gonna select the one that has the light version and we'll copy that and I'm gonna come back to my darker article I'm going to delete this and we'll select this and press ctrl V to paste and we remove it to the top and center oh sorry this is the light mode we actually want the duck mode so copy this and now we're gonna paste that and at the top alright there we go that looks much better now we can do the same thing for the search bar as well now when you're using system elements the actual components that are made by Apple for the human interface guy let's I would recommend using the same element from the UI kit as well so I'm gonna go back to my iOS studying final UI kit and we have the search bar over here alright so I'm gonna select I'm going to ungroup these I'm just gonna ungroup alright I'm just gonna copy this then come over here and delete this and I'll come here and choose paste and we're down alright now we don't want this background so I'm just going to delete that and now we have the uikit search the search bar from the UI kit for dock mode all right that looks fantastic alright we've got another section over here which is the home indicator alright so again for the home indicator what we can do is we can go to the UI kit and we can grab the home indicator from here I'm gonna copy that come back to my dock mode delete this and let's go ahead and select the frame and press ctrl V to paste it alright and we're gonna move this all with all the way to the bottom and center it okay now we also have this bottom tab bar so we're gonna fix that as well so let's go back over here let's go and as you can see we have tab bars all right now I'm just gonna color pick the colors from there because I don't want to go ahead and rename and edit everything one by one so let's take a look so this tab bar has a fill of one six one six one six and 94% so you can copy that and in light mode you can see that it is not pure white it is a different you know it's off-white color with 94 Pope acity so don't mistake this for to be completely white alright and it's gonna go scroll and I'm gonna zoom in a bit over here whoops right I'm gonna copy this color all right and even the drop shadow settings are exactly the same so the only difference is the drop shadow setting here is white with 16% opacity right so but we're not bothered about this for now we can copy this which is the background color here with 94% opacity come back to my dock mode and I'm gonna select this and I'm gonna paste this color and now that becomes dark and you can see the drop shadow settings I have changed that to black color and 30% now we can keep this to be 12% but that's completely up to you I like to keep it at 30% okay cool all right so the next is if you look at the icons oh here these have a color of 7-5 7-5 7-5 so we can apply the same color to this I just select all the elements that we've got alright and change that to 7-5 7-5 7-5 perfect we could leave these the same we just have this stroke for the icon that I made I'm just gonna go ahead and replace that with this right and that should be pretty good so there you go as you can see we quickly went ahead and redesigned you know the light version to doc version and it looks stunning all right and this is pretty much how the current existing whatsapp app looks like I wrote this entire article even before whatsapp rolled out stock mode so I decided to make a tutorial on you know on YouTube to prove that the guidelines that I used or actually the guidelines used by whatsapp itself when they were making you know doc mode for the app alright okay so we got another screen over here now this is the screen that is when the app when you know the content is scrolled so in this control D I mean when the chats are scrolled and I'm going to call this to underscore dark alright fantastic now again what we can do is quickly go ahead and change all the elements so this I won't need that I'm gonna pull this from the UI kit over here copy that and I'm gonna paste that over here and here we have the top navigation so if I come here to my UI kit we can go to the top navigation alright and as you can see you know you want to pull the exact same colors from there so this is 1 D 1 D 1 D and that is 94 and we can come over here we can change this to 1 d 1 D 1 D and set that to 94 as well and and now this black is overlapping so we can actually get rid off the color and we can change the color of this to be white all right that's fantastic let's go ahead and just change the color of this to black because we need this whole thing to be black and the same bottom navbar we can delete both of these elements and we can actually pick the same ones that we created earlier copy that and I can come over here and paste it alright that looks fantastic now all you have to do is go ahead and we can change all this as we did before now I'm not going to do it because it's quite simple so basically all you do is just select all the text titles or the name of the person's in this case alright and you can go ahead and change the color of this to white and yeah so basically go ahead and change everything else to be the appropriate color that we did over here alright fantastic and even same for the you know these separator lines that we have alright let's move forward so let's transform this one to dock so it's gonna duplicate that and I'm gonna call this three underscore dark alright now this screen actually is supposed to be the elevated state alright this is not the base this is a model that comes up so for example to show you in the uikit you know it's basically this alright this is what we're basically looking at it's not the flat one but it's a model that comes up which is basically in the elevated state so the first we're gonna do is gonna set we can delete this one and we can copy this and paste that over there okay and move it to the front and change the background color of this to be black alright now in reality synthesis already in an elevated state this section that we have alright it's not supposed to be in black alright it's supposed to be in one level of elevation so what I mean the same is this status bar is supposed to be black in color alright so we can go ahead and we can select the status bar and give this a black color but the entire section below is supposed to be one level elevated so if you go to the uikit alright so we've got base and then we have got secondary which is elevated number one and we've got tertiary which is elevated number two and we also have the elevated state which is the same as these two so if you look at the color of the secondary base that is 1 C 1 C 1 M it is same as the primary elevated which is 1 C 1 C 1 e so basically these two colors are the same the same thing applies here as well the tertiary base alright is the same as the elevated secondary alright and then we have this this extra elevated state which is 3 a 3 a 3 C and so basically we have just 1 2 3 & 4 colors that we have to work with so in this case I'm going to select this color which is one c one c one e alright I'm gonna come to my exercise files and here in the background I'm gonna make this one c one c one e alright so we have one level of elevation but the background over here or the status bar is always black okay now it looks a little bit weird but that's completely ok now for this top section what we can do is we can go to the uikit and we can grab these same you know color over here which is 1 d 1 d 1 d 94 you can copy that let's come back to our exercise files and we can paste that so 1 T 1 D 1 D now all you have to do is just go ahead and change the color of this to be white okay we can ignore the blue color for now because now you guys understand the concept we can leave that for now all you have to do is change this search bar so I'm going to delete that search bar and I'm going to get the search bar that we created earlier over here so I'm just gonna copy this okay and I'm gonna move back and I'm just gonna go ahead and paste it alright and move this into position or pretty much like that pretty cool ok the next thing is we want to go ahead and quickly change the text of all this to be white color because that is our primary text okay and we also have this secondary text alright and the secondary text uses the color that we mentioned here before which is our secondary color which is EB EB F 560 ok and we can go ahead and paste that over there that looks much better now these color these two are for different purposes so this is primary this is the second level hierarchy this would be for placeholder text so for example if you have an input field and you want to put some placeholder text in that you would want to use this color and quarternary colors are basically for disabled buttons and disabled text which basically you can't tap on because they are disabled so primary secondary placeholder and disabled that is the use case of these label colors okay the next thing is we have these circles so we can do is we can select these circles so we can select all these circles and what we can do is we can actually come to the UI Kip and we can use the fill colors so we have a lot of fill colors to choose from we can choose any of these I would probably go with the secondary fill color there is no rules for using fill colors you can use either of these I'm gonna copy that and as you can see the opacity is 32 I'm gonna come to the exercise files I'm gonna select that or as you can see it was already of that color in light mode which is excellent so as you can see all these are the same colors but with a different level of opacity which is excellent and I'm gonna go ahead and set this to 32% and that looks much better all right and now we have these separator lines so I'm just gonna select the separator lines that we have and as I mentioned before we have dedicated colors for this so I'm gonna choose the opaque one I'm going to copy this color code and I'm gonna paste that oh it's already that and I'm gonna set this to 100 and we have these extra white parts which we can get rid off delete and delete oh actually we need those so what we're going to do is I'm going to select this alright and give it the same background color of the layer here so which is 1 C 1 C 1 e and that 1 C 1 C 1 e is basically the second level elevated state or the you know in the primary in case of elevated alright that's pretty much what I'm talking about fantastic so we have one more thing left and which is this this is completely up to you you can customize it however you want but if you go to the uikit in the controls you can actually see that there is this color that was given which is 1 C 1 C 1 C 72 so I'm going to copy that come back to here and I'm going to go ahead and paste this and set the opacity to 72% alright and but as you can see it is not good enough so what we can do is we can actually go to the doctor my kit and we could pick any of these colors Oh which is the fill color so I'm gonna select the one that is the highest will copy that I'm gonna paste that in there alright and we want to set the opacity to 36 and I will set the opacity to 36 and that looks much better and we can go ahead and just select these individual letters and set this to be white okay so there you go this is the doc mode of version of it excellent now let's move on to this next section all right we can duplicate this and we can call this for dark for dark okay so let's go ahead and change all these again we don't want that we want copy did this and paste this alright now one thing you want to understand is that when you are converting from light mode to doc mode for base elements not everything is an exact opposite so just because this is white doesn't mean that this is black if I show you over here this is basically the controls a section of the uikit right now this is white but in doc mode this is not completely black this is not completely white but this is completely black it's not exactly inverted so that's one thing you want to keep you know in mind when you're designing for dark mode so what we're gonna do is I'm gonna come back over here and I'm gonna pick the same color which is 1 D 1 D 1 D 94% and I'm gonna come over here and I'm gonna change the same thing to be this and set this to 94% and we can actually remove the background color of this so that it blends with that and you can change the color of this to be white okay now here as you can see in the light mode this is not completely white but in dark mode this is going to be completely black right and let's go and see what the colors are for this so this is one C one C one C okay so basically this is also going to be one C one C one C now even though this is white this is not going to become black it's going to become I'm just gonna go ahead and select this and say one C one C one C okay perfect and now these two elements we can set these to be black so that they blend well and now we also have this inner shadow which is giving this color so we can actually go ahead and pick that same color which is this color in this case so we can copy that and it has sixty five percent opacity and I'm gonna paste that and call this sixty five percent opacity which is fine so we can do the same thing for everything all right sixty five percent sixty five percent all right so all these are now 65 percent the main title obviously we can go ahead and change that to be white all right and we have this secondary text and the secondary text as you know is supposed to be EB EB F five sixty so let's make this EB EB F five and set that to sixty fantastic now we also have this text let's see what they have used in the uikit so that is e V EB F five 60 which is the same thing so we can select these as well and make this EB EB F five and set that to 16 all right perfect now the other thing is we have these two icons and circles now obviously since these are shapes or you want to do is you want to use fill colors alright now we could use any of these filters I'm probably gonna go for the tertiary color I'm going to copy that and I'm gonna paste that and I'm going to set that to what we have twenty-four I'm just gonna go ahead and set this to 24 all right so now this is how it looks it looks pretty cool pretty awesome okay this has to be a white color which is that all right so we got one more screen all let's quickly see how to do this it should be fairly simple again so I'm going to call this five underscore dark so quite simple it's delete to the ones that we don't need I'm going to delete this as well when a copy this I'm gonna paste this over here and change the base color to be black now since this is not in an elevated state this is gonna this is the flattest is on the base when I said that to be PR black we have the title let's make that white we have all the other titles as well so they'll just select each of these titles make that white we have the secondary texts we can select all of these secondary texts even the icon alright or we can leave the icon for now which is the secondary level which is EB EB f5 which is gonna be 60% fantastic and we also have the lines so we've got a bunch of these lines okay and ah let's go ahead and quickly get that color code four lines which is separating the lines so copy that come here and paste right fantastic okay obviously being on the search bar as well the new search bar so let's go ahead and grab the search bar copy that and we can go ahead and paste this and move this down like so perfect and we also have this segmented control which is basically tabs so we can delete that and we can go to the UI kit and you can actually get the duck mode version of this all right now I'm not gonna actually delete this because you know I have edited it to fit the size of you know the text so rather what I can do is I'm just going to copy the colors and make my life much simpler so I'm gonna select this so we've got some color here I'm gonna copy this set this to 24 all right all right all right so this 224 this is gonna be white and alright this is gonna be six three six three six six copy that come over here and I'm gonna go ahead and paste this I'm not sure what was the opacity okay the opacity 100 fine the opacity 100 and this is gonna be completely white okay so there you go that's pretty much it we quickly fixed this up all right now let before we move on to the last one let me explain a concept which is called material so if you come to the duct team you like it so we cover about these separated colors we cover about the label colors which is basically four texts we covered about the filled colors which is basically four shapes and I four shapes and other elements and then we have system background which is basically what we use for designing our base and now here we have something called a system grace which is we have one two three four five six now what is the difference between system gray and what is the different building fill colors I've actually documented it in the article that I've written so basically the only difference is that the guidelines provide us with four fill colors and six additional grey colors and these are used for all elements on interface such as icons UI controls and more so the only difference is the fill colors have an opacity and the gray colors do not have an opacity so depending on your use case you can use either of these ten colors it is totally fine and I also show you an example of how we did it over here all right now in the tutorial I did little I used a DIF used a fill color rather than a system grade but it's completely up to use what you can use so basically what Apple's selling is that it's giving you ten different colors to choose from for adding that gray color in elements such as icons UI controls shapes and so on and so forth so I feel free to use this or this now we will be took a look at all the colors and now we have something called as materials alright we've got four types of materials we've got dark we've got sorry we've got thick we've got a regular we have got thin and we've got ultra thin now you might have seen these on iOS notification basically the background or becomes a bit blurry as you can see the background is quite blurry now where do we use this it's completely up to you there is no rule for this it's your choice and one way that we could use it is if I come to the exercise files over here alright and let me come to this section alright so let me actually pause the video and quickly clean up this and change all the settings and then I'll show you how to use materials okay so I've gone ahead and made all the changes to this screen what we can do is I'm going to duplicate this screen right I'm gonna bring it down and I'm going to duplicate this four times alright and we can we can have four different variations all right there we go so now we can use materials to basically give that effect of you know blurriness to the content at the bottom so the way we want to do that is let's start with the first one which is the thick one alright so actually let's create another one so we have so this is the original which is not a material and the other of one two three four are going to be materials so what we're gonna do is we're gonna select this all you have to do is just copy all the color values alright so you've got this you've got 92% and then you've got the background color which is fifty four point three seven which is fine so what we can do is let's come over here alright and we can paste that color and as you can see that the color was 92 percent you can set that to 92 percent and the background color is fifty four point three seven all right there we go now there isn't much of a difference between this and this not much if you zoom all so you can't see it quite well so let's move on to the next one which is a different material which is the default regular materials I'm going to copy this all right this is 78% and the same blur value again alright select this all right said this to 78% all right now you still can't see much of a difference but if I move this I'm not sure if you guys can see it or you can see a satellite blur effect maybe you can try it on your system it looks much better on Macs alright you can see it looks quite you know that you can actually see that effect happening through all right let's go to the next one this is the thin one now we should be able to see a significant amount over here so copy this and the opacity is 60% you can take that change that and set this to 60% and now we should be able to see more of this as you can see the Iron Man image can clearly you can see that differentiation over there alright you can see it much more over here alright that looks phenomenal and the last but not the least we've got ultra thin and we should be able to really see some stuff over here so copy that come over here and we can just paste it and set the opacity of this to 50% and now we can actually see some really good amount of blur over here on it and you know you can clearly see the difference right so when should we use these materials for what purpose you want to use it is completely left to you this is a design decision so but basically we've got five different variations which is without any blur with this business but it's thick we've got regular we've got thin and we've got ultra thin so you can use any of these in any of these cases you can use these for the bottom tab bar Nebula to the bottom navigation as well it's completely left to you all right now we've got the last screen left to do let's duplicate that and let's just finish and wrap up this tutorial so I'm gonna delete this you know delete this as well I'm gonna get all the exact components I'm gonna copy this and I'm gonna paste that over there okay and then we've got the bottom stevia syndrome there's no paste that here as well and paste that here as well okay and now this bottom navigation bar is a different color which we already know which is let's let's actually go and get that which is one six one six one six ninety four so one six one six one six ninety four perfect okay we can do the same thing over here as well one six one six one six fantastic again change the color of these titles to be black this is going to be the secondary which is EB EB f5 okay that is great and now we have this input field now because this input field is not there in the uikit what we can do is we can use any of our colors that we have over here any of the great colors now let's use a system color let's use system for I'm going to copy this system for color and I'm gonna go ahead and just paste that over there okay and that should be fine I mean you can use whichever color you whic ever one you want we can even go for a lighter version so maybe copy that and we could paste this so either of it completely up to you you can deftly do whichever you want all right and now the finally we have this background so I'm going to set the background color to be black alright and basically I added these images these groups of images alright because I didn't have SVG's somebody's going to quickly go ahead and change the opacity here from seven to sixty so we can actually see it now the actual guideline none of the actual Android app is is a bit sharper so I think they made it to 80 or something it is quite brighter and now this is over here so now we basically have couple of things that we can take a look at now the first one is this now this is one level elevated so one two three four five six alright so these this is one level elevation so if I go to the duck team I would end up using this bass elevated which is one c one c one e but if you actually look at the real ios app what they have done is they have used the second level of elevation which is this which is 2 C 2 C 2 e I actually verified it so I'm gonna use that again but ideally you would want to use this because this is one level of elevation alright so I'm gonna select this copy this color and I'm gonna paste that fill over there ok and now obviously this all these would have to end up becoming widen color alright so let's make this completely white alright we've got this text here as well now this is the secondary text so what we can do is this is going to be EB EB f5 and set that to 60% that looks so good I also added this little corner you know for that thing so I can change it to this color that's fine okay now this is the one that's in the middle which is basically the reply to you know you know message for this what they have done is they have gone ahead and use the level 1 elevation alright so copy this and paste that so they've used level 1 and now we have to change this to white but actually since this is secondary over here this is going to be secondary over here as well so I'm gonna make this to be a EB EB f5 and set this to 60% how effect now one last thing that you want to note is when you're designing Dartmoor is accessibility alright so if you look now let's go ahead and take an example of this so we've got white text we've got this blue color text and then we've got this background so basically we have this contrast checker which enables to know whether they passed the accessibility guidelines now if you go to my article I mentioned about the accessibility somewhere over here so right yeah over here so the colors need to pass a minimum contrast ratio of 4.5 is 2:1 all right and you know I definitely go through this section as well it really helps you understand how it works okay so let's actually check the current color and see how that works does it pass the color contrast ratio right so the base is 2 C 2 C 2 B I'm going to copy that and in the backroom gonna paste that okay and in the foreground we have this white text right and if I go and set the foreground color to white you can see it's got a ratio of thirteen point nine three is to one which passes the contrast ratio but what about this text all right I'm gonna copy this and shut the foreground color to this now you can see the foreground color is two point seven is to one which which completely as you can see it fails so what you want to do is you want to increase it so that it reaches four point five is to one now you can choose any custom color that you want over here or what I like to do is I just like to increase the lightness until I read something which is over here which is like anything that I want alright so this seems to be a nice colors I'm gonna copy this color and I'm gonna change it to this all right so now as you can see in light mode the color is different than the color in doc mode and this is something that you can implement as you know and talk to your developers about so two different colors for either of the modes alright let's do the same thing over here so this is some kind of a purple I'm gonna copy that and I'm gonna paste that over here and as you can see it does not meet because it needs to reach a four point five is to one so let's increase that until we get four point five is to one and then we can copy that and we can go ahead and paste that over there now that passes contrast ratio okay again this again again pauses the contrast ratio yeah this we're gonna copy this and I'm gonna paste this over here fantastic all right it's looking great now I'll be able to have this other color now you can set this to any color you want but I'm gonna use whatsapp's color which whatsapp has used so I'm gonna select these all right and it's gonna paste that over there this is whatsapp's color and this is obviously going to be you know white in color because this is the primary text all right and also these two you know small things okay and also we've got this text over here and we can set this to EB EB f5 60 which is completely fine and yeah that is looking that's pretty much it alright and now this is the doc mode version of the chat screen and as you can see we have all these designed for doc mode and we have covered everything from the UI kit as well so this pretty much into this bill you guys think is so much watching hope you guys really enjoyed it if you did let me know in the comment sections down below make sure to leave a like and subscribe to the channel for more amazing awesome content I'll see you guys in my next video till then take care and bye bye [Music] you [Music]

Channel: Design Pilot

Views: 5,346

Keywords: dark mode ios, dark mode ios 13, dark mode instagram, dark mode iphone, dark mode tutorial, designing dark mode, design dark mode, human interface guidelines, dark theme, dark mode mobile, mobile app, ios app, ios app design tutorial, ui design tutorial, ios app ui design, ios design guidelines, dark ui design, ui dark mode, dark ui theme android, material design tutorial, dark mode apps, design course dark mode, dark mode ui design, dark theme ui design

Id: YaFLGGrx6sY

Length: 39min 11sec (2351 seconds)

Published: Sat Mar 07 2020