Supporting Dark Mode in iOS 13 and Swift 5 | DevTechie Interactive | Skillshare

Supporting Dark Mode in iOS 13 and Swift 5

DevTechie Interactive, Learn new everyday

Supporting Dark Mode in iOS 13 and Swift 5

DevTechie Interactive, Learn new everyday

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (1h 21m)
    • 1. Introduction

    • 2. App Demo

    • 3. App UX Design

    • 4. Default Support for Dark Mode

    • 5. Defining Custom Colors for Dark and Light Mode

    • 6. Using Custom Colors in Code

    • 7. Using Custom Colors Based on Appearance

    • 8. TableView Bug Fix

    • 9. Visual Effect Vibrancy

    • 10. Opting Out of Dark or Light Mode

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Get your app ready for Dark Mode of iOS 13 in Swift 5

In WWDC19 with the announcement of iOS 13, Apple announced to support long requesting feature called Dark Mode. White backgrounds can be a bit overwhelming, but Dark Mode lets you focus on the main content more, whether it's new Memoji stickers in messages or browsing through playlists in Apple Music. Browsing through photos also feels more intimate and immersive with Dark Mode engaged.

It’s also easy to turn on Dark Mode. You can do it right from within Control Center with a dedicated button. Even better, you can schedule Dark Mode to turn on and off at a specific time or based on sunrise and sunset.

Apple is letting third-party developers tap into its Dark Mode API so that their apps are optimized in a similar way.

So, is your app ready to support new customer obsession? If not, this course is for you.

In this course you will learn to adopt best practices for iOS 13 while developing for dark mode support. You will also see how you can make your existing app work for dark mode. We will cover all the pitfalls and look into various different assets while making sure that you understand as what it takes to develop and be ready for new dark mode interface for your apps running on iOS 13.

So if you are ready for the challenge, come join me in this fascinating journey of supporting "Dark Mode".

Who this course is for:

  • Developer who wants to build apps for iOS 13
  • Developers who want to support dark mode in their app and be ready for iOS 13

Meet Your Teacher

Teacher Profile Image

DevTechie Interactive

Learn new everyday


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: alone. Welcome to this. Our very exciting course on I was 13 supporting dark, moored in Iowa's 13. So after several years off customer requests, her apple finally are brought a dark mood into the iPhones and ipads with upcoming I was 13 and I bet OS releases. Now this actually ah adds a lot to the excitement off. I was 13 release because ah, it's not only providing a full range of features, but a different set off you. I and a different kind of mindset for iPhone users to be used. And you can basically support your app and basically have your app available and ready for . I was 13 dark moored as all over this course. So just follow along and we'll see what we can do if you haven't tried it yet. On the phone, I was 13. Beta is already out, so I think if you can install it on your phone and ah, you simply have to, ah, turn on few settings and then you should be able to see it. So let me show you a quick video that I have recorded on my phone. And, ah, if you go on your display in brightness. You can actually choose between dark and light mode. And ah, if you go after selecting the mode, if you go and check out, for example, maps, As you can see, map has are being changed into dark more, that's all. And if you open use up, there we go. It's adopted. Do the document is all. Now we gonna stretch back to the light moored, and we're going to take a look what happens in the map. So there we go. The normal map appears, and same for the news. And as you can see, the news appears. So basically what this shows is like, you know, these APS that Apple has brought together, Then I was 13. They are already ready to go with a dark, more support. And there's a lot of infrastructure that Apple is already providing. Do you as a developer basically to support that? But there are a few minor things that you want to keep in mind, and what we can somewhat in this course is we're gonna look at, um we're gonna build a simple app, and, uh, we're also gonna explore various different aspects off dark more how your app basically can be tweed from ah, small text label to basically displaying images and stuff to support dark moored and we're gonna actually check it out. Ah, dark mood for both, for both dark and light mode for your app. And we also going to see basically how ah, you can totally ah escape out or basically ah ah not adapt to the dark mood if you don't want. And if you're not ready to basically adopted dark more yet ah, your app can be the black sheep in the herd. But if you want to Hey, if you want to do that, I can totally do it so we can take a look How you can actually either exclude a page, um, or exclude the entire app. Eso, excluding a page would stand where you know you're showing a print kind of page where you wanna show users. For example, they put you something from your app and you want to show them a receipt. Now that received, you don't want to show it in dark Mordor the dark background and you're a short and light her background for saving printer costs. Obviously, in that case, he can opt out a page or you cannot are the entire are basically for the dark. More so in this in the scores are there's a lot of things that you're gonna see new. That's I was 13. And again, we're going to be using X code 11 beta, so I hope you're as excited as I am. So let's go ahead and up on to the next video and we're gonna be talking about supporting Dark moored in IOS 13 and Swift. Okay, I'll see you guys next video. Thank you. 2. App Demo: No, no, come back. And in this you don't. We're gonna be talking a little bit about how dark, Moz. So supporting dark moored in your interface so you can complete colors, images, some of the behavior, um, off your app. Basically to automatically a topped with the dark mood when that word is active. And this is provided in both Mac OS and Iowa, where users can choose to adopt a system wide a light are darker. Expert appearance, not dark Appearance is, ah once again called dark mode. And it influenced an interface Ah, style that many APS already adopt. So most of the apse, like if you have used on your Mac a new outlook from Microsoft, it already adapts that dark mode. Seems so, uh there APS. Actually, they're already supporting it, and they are already out there without the need off. Newer version off Mac OS Catalina, they're already there. So it obviously makes sense for Apple to support it at the system level. Now user can choose the aesthetics that they prefer. They can also choose basically up these interfaces to be toggled depending upon Ambien light or specific schedule and stuff like that so they can actually scare totally schedule . Ah, there. Dark and light experiences are based on the times and everything. Now all all APS are going to support basically both light and dark interfaces style. But there might be cases where they may opt out for it, although Apple definitely recommends having to support both because it's a super easy, basically do support both light and the dark mode. But for any specific reason, If they want to opt out, they can very well do that. I mean, they are not enforcing it yet because this is the first release out, and they won't actually put it out for the adoption. It's also, I think, they're going to actually go with with the flow and see how where the market is actually turning. And they're based upon that taken, they may decide, actually turn for some time. Not now, before you do change your code us anyhow, like you know, before you won't touch, start making changes are into your coat to support dark mode. My personal recommendation would be to turn the dark more on and see how your app actually looks, how it responds. One of the things that are already changing. And basically, this will give you an idea and, uh, list off items that you might want to be focused on. Ah, so, for example, like no system does a lot of work for you already. So if your APP uses like, standard stuff like standard label system fonts and stuff like that in those cases are, you might not need to make many off the changes you might need to make, like, you know, just fewer changes colors Indians here and there. And you will just better be off with that. But you might also, if you're using a lot of custom stuff, then it's going to give you how to basically provide that customize. Ah, set off information or set off trouble appearances that can be used in double depending upon the mood that is currently selected by the user. So that's actually what would be where there will be my first recommendation actually to run and ah ha Look at your app. Unsee were stands as is all right. As far as the course goes, basically what we're gonna be building is the simple contacts app s So I have some our random dear Generated loaded into a Jason and we were reading that Jason onto a table view . And the stable view has users picture. So what were the picture? The image that we're using is the new font sf r font. And it comes with a flavor where he can actually have a system image. Ah, that image is a vector image. You can actually directly dragon drop from the front list. I'll show you how to do that when we get to that point when we designed this table for you . But that's what I me using here. And, uh then you have a name, phone number, email address, and the address basically listed these four rallies and there are dividers. This is another custom self, and there a few items, actually. I mean, there are a few rows there, there. Ah, this is just for the purposes, so I can show you late in how an actual app might look like Now this is the dark more than I have selected. But if you know if you prefer, like, you know, starting with the light mode, just go to your settings and go to developer and simply select other appearance. So if let's say you turn off the dark appearance and go back to the AP Ah, the app is this is how the app it's gonna look like there are a few things going on here. So I'm actually I don't know if you can see, but I'm changing. Some of the colors are here for the background. I'm also changing the color for this out. This particular that name field, OK. And ah, if you click on one of these, these images are also selected. And this font is also flip back and forth, depending upon if you're in the light mode or dark moored. Okay, so I'm gonna show you s Oh, this is the light mood that we have. And as you can see, this is the new a way of presenting Ah, the model Ah, screen. So you have like, you know, it's kind of like a actions sheet style and you can actually swipe down to dismiss it. And your view actually kind of like girls in the back. Okay, So if you search back into the dark mode, what's gonna happen is the APP is going to change our certain things certain subtle things . So color has gone lighter. The, uh, basically for the image. This color has also gotten gotten, like little bit orange. And if you click on this, the images completely changed. So reason I'm changing the image is just toe. Just wanted to show you, like, you know, that you can stop images based upon, um, whether you're in dark motor or are light mode. Now, this is actually recommended to basically create assets image assets for dark more. Dave L Because you want to support that for user, for your users to make sure that you I actually looks great. Ah, for example Ah, Apple has already done that. If you go in the maps, Aziz, you might notice, Like, you know, map is now map now has, um okay. Um all right. I have no idea what's going on. Okay, so it's trying to take my location. Okay, this is temperance. Goal. That's what is detecting by default. Okay, So if I zoom out as you can see the entire map Artiles have bean laid out with the dark appearance. Now, if I go and change the theme to lighter being size you saw in the video. It's gonna basically change this map to lighter appearance. So there might be situation. We're like, you know, if you noticed the style has a green and this green are tends to different shade of green. When you actually go into dark mood settle, let me show you that, as you can see, it's ah, it's sort of like, ah, teal color like a greenest dark greenish color. Ah, that's that's what I've seen used to. So there might be a situation where you might wanna stop out the images to make Ah, the year. You I look a little bit better. So for those situations, that's why we're I'm actually showing that you can very well do that. Now, if you notice Ah, the, uh the blur of you that we have here the color inside the text is basically white. Okay? And, ah, if you go into your, uh, into the lighter appearance, you're gonna notice that the color has changed the major exchanges well, but color change to black. Okay, uh, so and rest of the other things, like, you know, Florence and everything They were white like gray and like, you know, they have changed their color as well. Eso that shows like, you know how much work there is, actually, but trust me, it's not quite a lot there just you thinks that you do here and there to support the things , but, um, you wouldn't want to be ready, like, you know, before Apple, actually ah, like, you know, opens this I wester team for public because this is a new thing. And ah, I can bet you like, you know, each and every person who owns an iPhone and can install I I was 13 is gonna want to try this because I dark mort has beena wide success for many APS. And actually, it's exclusively supported for many different things. Okay, so enough said, let's go ahead and ah, dig into the X code and we're gonna start looking how we can make this app and then turn it into something that can work with board dark and the light mode. OK, so I will see you guys in next video, and we're going to start setting up our project. Thank you. And I'll see you at the next video. 3. App UX Design: Hello, Uncle Mac. And in this video, we're gonna be creating our projects. So let's go ahead and get started. I have X scored 11 open year eso Ah, let's start a new project. And, uh, we're gonna do is ah, in this, Um, let me expand this a little bit. You can select ah, single view app once again. And, um, we're gonna do is that we are going to name our products, so I wes dark mode. Um, you'll see, for I start mode. I'm just gonna give it that. Ah, you might wanna give your organization name your organization. I didn't fire. Make sure you have languages. Self selected. You're not working with safety wise, so make sure you leave that off and not the cordage and everything. We're not gonna look into all those, um, and recently gonna click next. Now, we're going to save this at your chosen location and gonna click on Create. Now, once we have created Ah, this and we have our, um, our app ready to be to be built. Okay, so let's go ahead and and get started. So what we're gonna do is we're gonna open the object library by, uh, by pressing command shift l and ah, I'm gonna drag and drop a table view, all right? Just drop it on the screen and constrained this so constrained it. Zero point from all sides. Now we're gonna open the object, likely one more time, and we gonna drag and drop a cell It reasonable, Celso, table of yourself and we're gonna increase the height of the cell. Uh, let's go ahead and drop an image of you. We're gonna size it. Um, approximately. And ah, what I want to do is ah, I would actually start typing for the image field are person, and ah, he can see there are different. Several different options you have. Like, so we can select person circle, Phil, because I would actually show you guys, how the fill color can we change depending upon the situation? Like, you know, when you change from well, one from the dark, more to light mode that we're gonna choose something that can show the colors more dramatically. Uh, we're gonna constrained this, so I'm gonna concern 11 points from top 20 points from left and with the night, I'm going to keep it the way it's been set and add constrains. Now let's drop a label. Okay, I'm gonna just put it right here. Now, one thing I want to show you. So if you open your object likely one more time. There's this new tab call image. So show image Gallery. If you look at that and if you search for person, um, if I can type correctly Okay, So person in our circle the same let's actually appears here. So instead of, like, you know, putting it in the image, you can simply drag and drop it somewhere is all. And that's gonna work as well. So, for example, we can actually increase the size, and it's gonna basically adopt to the to the size it follows the aspect ratio and everything, so ah, you should be good. So that's another way to add an image. But these air, like, you know, as a symbol images newly added images basically into the I was 13 serve you and they're ready for you to use. And they're available with SF font. Okay, so we have our label. I'm gonna hold option key and drag and drop and keep the half option key held and oppressed and basically leave. The most points are so I can actually drop and create a copy off these labels. I'm gonna create four of these, like so, and ah, gonna name each of these. So it's gonna be name is gonna be some for number in this format. This is, ah, going to be email. So email at email dot com. Then we have your address. So, for example, I would say 123 Main Street, California. Just something to put there. All right. Let's, uh let's make this text a little bit big. Ah, that would do. And we're gonna make this on a little bit bold. So bold is good. How are we gonna make this one a little big? And us maybe say my bold like so? And this one is regulars find 17 points, maybe 16 points. I mean, just to show variation. Okay, now we're going to constrain these soulless constrained this to be 11 points, eight points and eight point from trailing, and we can do the same thing for this one. So we're gonna say, um 888 Um And then same for the email. 888 And for the address. We can also provide the bottoms of 8888 And simply gonna add that. Now we see this red. That means lives a conflict for our, um, constrain s. So we need to actually just have constrained. So select that label. Go to Ah, it's ah ah Bobo. I forgot the name size Inspector. Ah, go to the size inspector. And basically, for the word ical section, make sure you have the bottom space selected quick on edit an instant off equal Just say greater than unequal, first of all, and then you might want so for support to basically, if, let's say the address is really big, you might want to support more than one line. So we're just gonna set lying to zero. That means the row can expand as much as you want, basically to provide a space for the entire address to fit in. And when it flows and it ends, like in amused the edge of the screen that this can actually word wrap. So for the line break, you can just a word wrap. Okay. All right. With that of these things are set. Now, let's get this. Um, there's one more thing actually want to do is, um I want to select this stable view and make sure the separator is none because we're gonna create our own separator. So we're gonna do is open the object, likely one more time. And we're gonna look for table view, sell and gonna drop another cell here like so. And there's gonna be a second birthday. I fell so fast forward I fell is going to be this one, and we're gonna give it to you. Use I didn't find a cell. And for the 2nd 1 we gonna say divided her fell. Okay, so it's gonna be a divider. Now, let's use the 10 color for this one. And the 10th color is something that Apple recommends in order to support properly. If you're not using your own colors, which we're going to see in the next area, how we can actually use their own colors. But if you're not using your own colors than and if you're sticking to standard colors, that Apple provides that this is the list and you can choose from any of these there as long as you choose from these Apple is going to make sure that this poses supported for both dark, moored and light mode. So, for example, we can say its a group table background color, have a so we don't see much difference here. So I'm gonna say, like, text color. Let's take a look at that. Oh, um, if I want to select the correct thing in that case, you're gonna see it. Okay, Um, group table, mystical look. No difference. Okay, so let's see. Ah, yes, you can be. What can we select here? So I think we can select a secondary system. So secondary system, background color. All right. Why are you? Oh, course, um, is not It's gonna be default. And it's the background that we need to choose OK to any mistakes. Sorry, guys. Okay, secondary. How bad that we go. So there we go. We have, like, you know, this is the only thing that we're gonna provide in this one. Okay, Now, um, let's go ahead and, um and basically work without data and we're going to see, like, you know how our app looks like without making any changes. Ah, into the app unsee like you know how it looks like in the dark moments. First thing first. I'm gonna basically create our, um, important file here. That file is gonna be data I'm gonna show you. This is just a sample data that I created and what the sample did it includes is basically some basic some sample random contacts. So we have a name, email, home address and phone number. OK, so in order to parse this, let's go ahead and create a class here. So I'm gonna create a new file, and we can select swift file in this case, and we're gonna say my contact. All right, there's gonna be a struck it's gonna inherit from Deco dubel. So, DeCota Bill is gonna help us parts this days on. And, ah, the property that's gonna support is gonna be exactly saying what we have in this data file . So let me drag it here. So we have name, email, home address and phone number. Now, these keys, we're going to keep it exactly the same at their in the Jason. Maybe up. Now we're gonna create a function that can actually parts Are Jason into an A collection off objects, basically a an array that actually has all these contacts that were there in the Jason file . So let's go ahead and read that file from the bundle, and then we gonna load it into Jason and converted, decoded, using Jason decoder and return an array off contacts. So you're just going to do that going to create a global function? If you like, you can create a function within instruct our ah static function with instruct. I just thought, like, you know will be easy and quick for demo purposes, so it's simply gonna create it right here. But you're going to get the girl for resource with extension. So the resource is called data. That's the name of the file. And the extension is Jason, and we're gonna force a nap it because we know the Texas here. So what? We're doing years. Basically, we're trying to extract data out off this. You are? Oh, so this particular line gives us the URL for this data about Jason. And then we take that data Bassett into Data constructor and basically create a Jason Dina . OK, once we have done that, how we gonna basically core parts are, ah, contacts using Jason Decoder. I saw what we're doing here is we're using Jason Dick order to decode. Ah, an array off my contact. And, ah, we're extracting that out from Jason Data. The data later that were created in this line 20. And then we're going to return the collection off contact. So if you option click on this, you gonna notice that this is actually collection off my contacts, and that's about it. So that's all you need to do, basically, to parse this particular this particular Jason and convert it into an object, a collection off object. Okay, so next thing we're gonna do is we are are going to create some outlets for a table view and every gonna create some cells. So let's go ahead and do that. Plus, you're gonna go into our view, controller, and let's add an outlet right now, we're gonna basically connect this outlet to our table view. There you go. Now, when you control, are we going to say that be that this view controller is basically delegate and pterosaurs for this table view? All right? Now, in order to support these two, we're gonna have to build two functions from the fourth Delhi at number off rose in section and sell for row at in Expat. Now, before we actually do any of those What? What I want to do is create a contact cell where we're gonna actually have, um we're gonna have a class representation off our cell, okay? And we're gonna collect, collect, connect all the outlets. And after connecting all the outlets, are we gonna basically use that to populate cells for each individual line, Adam, that we have inside the contact? Jason. So let's go ahead and create a new file. It's like coca touch class subclass off you. Itay will be yourself. And we're gonna call this contact cell, save it, and we're gonna create some helpless here. - All right, so these are all off. All of our outlets were also going to create a, uh, basically a variable that available is going Teoh store. Or basically, that variable is gonna be something that we can set. How? From the table view from the view controller. And that variable is going to take the responsibility using dates that observer to populate all the values that have been passed in within that object. Okay, so let's create a label called my contact. It's gonna be an optional type, and it's gonna have another for did set. And we're gonna check if let contact is equal to my contact. If we have that data, then we're gonna say south dot name labeled on text is equal to contact, not name self dot Phone number, label dark text that phone number. All right, so this way, whenever this particular variable is set, we're gonna set all these couplets. So now this gives an opportunity to basically say I be outlet private week. So this way we can actually set the of these outlets to be private, so they're not exposed from outside to be used or to be set. And we're gonna keep this. Ah, were able to basically said, the state for all of our individual components within the South. Okay, so let's go back into our storyboard and, ah, we're going to select this cell. I'm going to give it a class, and this class is gonna be contact cell. And now, once you select the cell, we can actually connect our individual components. So image view, name, label, phone label, address, an email. Okay, So after selecting all these, what we're gonna do is ah, we are going to go back into our view controller. And in the next video, what we're gonna do is we're gonna provide, basically, are, uh, bowel functions are the protocols are critical functions that needs to be stubbed out that provide number of cells and cell for Roy next path to complete our table view. And then from there, we're gonna launch and see. How does our app looks so far? So I'll see you at the next video, and we're going to continue working on this too. Finish this up. They will be your creation and then see how it looks like in the dark mode pipes all see in the next video. 4. Default Support for Dark Mode: Hello. No, come back and let's continue to work on our app. So we're gonna It's about a couple off. A couple of functions that needs to be built that are required by this telling you I You why? Table view? Delegate protocol. And you I table view data source protocols. We need to First of all, we need to conform to those. And then we need Teoh like this particular error that shows. Do you want to stop these portable stuff? Yeah, we do want to do that. And Ah, I don't like those to be at the top, so I'm going to remove them from the top. And Okay, so and we're gonna put it at the bottom here. There we go. So first of all, we need to get a number off roles in section. Well, let's create a variable that's gonna fetch all the context. So contacts is equal to pars Contacts. Okay, this way our contacts are ready for us to use. So be simply going to say to return contexts dot Count right? For self for row at in expat is basically gonna be the cell that represent Ah ah sell That represents Ah the current row. OK, so all the data that it represents eyes what we need to actually build here. So if you simply going to say let's sell is equal to table view dot Dick You reasonable still with Identify yourself, Have contact felt and we simply going to say here, contact out. My contact is equal to contacts, Index path dot role and, uh, we simply going to return this cell. Okay, So once we conformed to these two, let's go ahead and run this and ah, let's see like you know how our app looks so far if we have made any mistakes Okay, so it's launching and there we go eso as you can see right off the bat it's actually looking not that bad. Actually, it's already supporting the dark mode, as you can see, like you know, our light movie of decide designed for the black fun. But it's looking all white front here. And if I quick change the setting and go back to developer and change it to ah, lighter appearance and go back, our app looks the way we have designed it. Now let's fix few things like I won't actually Ah make sure that this image is not cut off . And ah, then I also ah, wanna put basically are divider sounds. So there's no divided between these roles, So I want to use the dried herself that we have created. So let's put that in place as well. And we will be ready to customize our, um are you I for our custom thing. Okay, so let's go ahead into that. So I'm gonna go back. Um, and first of all, ah, week in. Do. One thing is allessio The height for the cell is so sell height is size Inspector 1 58 So that's good. Now let's go on and set the They will use height. So we're gonna say table view dot Estimated row height is 1 58 Okay. And then we're gonna say table view dot row height is table you I table view dot automatic dimension. Basically what this is going to do if the role grows in size. The row height is gonna girl according to the content height. So if the content grows, for example, if the if the address becomes longer, like, you know, four line five lines, your style is automatically gonna grow. It's not gonna cut it out. So that's what this automatic dimension does. Okay, now, second thing we need to do is we need to start supporting every alternate space or like in even at the start. We need to put that divider in place. So what I'm gonna do is I want to show twice the number off a number of roles that currently are there in the contact. Okay, one for divider and one for that south. Now, another check I want to put in place for sale for Roit and expat is if the index path Dr Role. Um, and if you basically marred that, too from by two. Uh, and if this comes to zero, that means we're at even number. So we're gonna basically de que the, um, divider. So divider. So Okay, in that case, And if that is not the case, then we want to actually just go on and proceed with regular self. Now, I do want to provide ah, height. So we have this estimate high provided, but we don't want to show a 1 58 height. Umm El Worth. Low or high date. Height off. Divider. So if you want to say is height for rule and in next bath and here we're gonna do something similar is we're going to simply say, if in next path doctor role mod two is equal, equal zero. In that case, we're going to return the height to be 55 points. May 5 points. Otherwise, are we going to return you? I table view dot automatic dimension. Okay, Now, let's go ahead and run this and see if our divider cell shows up. So our delight a cell is showing up, but as you can see are view is actually still, um, our image still getting a little bit cut off. So what is the have going on here? Okay, so let's go ahead and go to our storyboard and, uh, see if we have any. So we have leaving space with trailing. Trailing training is the top space in height. Solicit Just height a little bit. So no. Started to 1 30 maybe. And hopefully that's gonna fix that. Okay, so that did fix the issue. Um, okay. We might want to increase the height a bit more. So stay standard height. We need it. Won't 60 Let's go ahead and try that, okay? Because it's raw. An automatic award, an automatic role. Ah, that's why it's actually not adapting to it. So let's go ahead and move this image a bet up. Okay, so, top space, we're gonna change to maybe eight points. Okay, so it's actually aligned over than this. The base. And that's actually that's actually better. Okay. All right. So now let's take a look at our, um, table and ah, ballistic. Look at our each each of our row eso as we already know that it actually already looks scared in the dark appearance. But what if, like, you know, you want to Ah, just make this name stand out and everything else to be faded a little bit. Now, what you can do is you can choose ah, the tent color or the color to be something that Apple already provides. For example, the default is label color. The everything is easy to find it at the label color. Ah, if you're not creating your on set, then it's gonna actually adopt automatically and reverse it into, or are basically provide a different variation when you go in the dark. Lord Now, let's say you have a secondary label, so you can actually use secondary label color, which is a big, like, you know, Great. Then you can use tertiary eso. There's a tertiary label color, and, uh, there has to be Ah, something. Okay. Ah. Quarter very label color as well. Okay, which is really light. Okay, So if I go ahead and run death, you're gonna notice that we have, ah, value that's fading from, like, you know, one gray level down with that, um, like, you know, the people, the appearance for the label. Although I don't really like the last 21 So I'm gonna actually change these two to be like , you know, secondary. Um, so let's change it to secondary level color. Remember, that is secondary label colors. Come on. Where you go? OK, and secondary labeled color. There we go. Okay. So if we launched this, you're gonna notice that we have the name standing out a little bit more than all the other info Now, we can actually change this to be lighted prudence. And if you go back and we have our great color and ah, black color fonts available here, Okay? So that's actually what we have our readily available and supported as long as you have these fonts and the colors chosen to those that Apple already provides to you. Okay, so in the next video, let's take a look how you can actually create ah, your own color set and basically provide your own variation if you want to. Okay, so I will see you as the next video, and we'll take a look at how to change colors for things. So they they appear in both lighter and darker mode, depending upon users preferences, whatever the more they're actually looking the at bat of it's all see as the next video, Thank you. 5. Defining Custom Colors for Dark and Light Mode: Hello and welcome back. And in this video, we're gonna be looking at how to create your own colors to be used custom colors to be used instead off using Apple's provided color, which might be limited or which her limited incent. Okay, so first thing we're gonna do is create our own color. So let's go ahead and go to Asset Start XY assets A like that. And ah, here at the bottom, there's a plus sign. So you're gonna basically click on this plus and going to choose a new color set. Okay. Now, with this new color said new color selected Ah, you might wanna color name it something, So I'm gonna name it my blue, for example. My blue color. Okay, now, when you have the selected, you see this white color right here. Um, if you want to change it, you can actually change it to be, for example, that showed the panel and let's select the blue color eso It represents what it's saying. Um, a darker blue is actually good. Okay. Yeah, that's actually good. OK, so now what he can do with ex scored 11 to support dot more. You can go to appearances, and you can choose any or dark as soon as he choose in your dark. You have these two sets? Appears so any appearance is basically for your regular APS. So abs that are not on I was 13 or aps that have light, um, light mode, horses, dark mode. Basically, they're going to see this. Any appearance. Okay. And APS, uh, basically are are fools that are in dark appearance. Um, they're gonna see discolor. So in our degree of devolution, I'm probably going to select the color panel and gonna move it up a little bit to make it a little bit of light. So this is how you can create two different variations. Now you can actually choose any light or dark. So basically, what this is going to do is any becomes something that's actually supported below IOS 13. So all the other APS, all APS running on all the other devices below I was 13 operating system are going to see what's provided in any appearance and aps other in light, um, that are running in a phone that has light opinion said they're going to see this color. And after Ah, that are running on iPhone 13 with dark. More if they're going to see this color. So I don't have really good reason, actually, to have the three, So I'm gonna actually stick to these two. Well, if you are in the high contrast scenario, you can actually have your high contrast selected as all to add two more colors. This is more for the accessibility purposes. Eso if your app supports accessibility, which it should, Um Ah. In those cases, you can actually choose thes two callers as well to make them high contrast of hoping. Okay, so you're gonna leave them on. All right? Now we're gonna do is once we have this color starts selected, I'm gonna create another color, Another color said, And I'm gonna call this one my orange color. And, uh, first, I'm going to select the appearance to be any and dark and for the color said, I'm gonna choose a darker sort off like orange and, ah, for the dark appearance. I'm gonna choose a lighter sort of orange, like so, Okay, and, ah, once again make high contracts available as well. And once you have done all these, what he can do is go back to your story board and within your story board. Ah, you can basically select the thing that you're targeting. Selects, for example, with target this image and we're simply going to select its tentacle er to be my blue or my orange. As you can see, as soon as you name these colors, they're actually showing up within the list. So you can say, like, you know, choose my blue instead of choosing Ah, instead of having that other 10th color that he has selected and for the name, for example, I'm gonna choose instead of black and latitude the orange color that have selected okay with that said, Are we gonna actually rerun the app and take a look at how it actually changes? So this is our light appearance, and as you can see, it's that it's darker shade off blue and the orange that showing up. Now let's hit command shift, double edge. So command Schiff, Etch, Etch and, um, the whole command and shift button and press etch he twice just to make sure, um And then you're gonna searched back dark appearance. And then let's go back into app. And as you can see. The blue color is now lighter blue color and orange color is also lighter orange color. Okay, so this is how you can actually create your own color steps and basically set these colors Ah, into the storyboard. In the next video, we're gonna take a look. How we can actually said these colors using the code. Ah, And then we also going to take a look how to basically choose a different image based on different appearance off the OS. Okay, so I'll see you guys the next video. Thank you. 6. Using Custom Colors in Code: alone. Welcome back. And in this video, we're gonna be talking about creating or studying colors from basically code. So last video, we saw how we can basically, ah, create our color set and then choose that color from the storyboard. Has it shows up in the selection list? Now we're gonna see how we can actually do that of it in the code. So let's go ahead and go to your assets. Start XY assets, create a new color set. And this time I'm going to create my gray color and we're gonna choose the color and set the appearance to be any or dark. Now, for any appearance, are we gonna make it? Look up. It sort of like to start, maybe. And, ah, for the dark Europeans. We want to make it a little bit light. So I'm gonna just move it a bit and that's enough. OK, so that's what it's going to show up as our dark appearance. Now let's go to our cell, and any time you're trying to set your you're basically you're layers color are like, you know, a background color or anything like that. The recommendation that Apple actually provides is basically using something called either trait collection change layouts of you'd draw update constraints or 10 color change. Now the thing is out. When the system appearance changes, the system automatically asked each window to pay to paint herself and view. Our views are redrawn based on that request, and during this process, the system call several well known methods for both Mac OS and IOS. So basically, these the these functions that that I've just named, like trade collection of layers of views or draw in your eye view our update constraints or tent color The change. These are the functions that actually that are get that gets called when the system appearance change agents s. So this is your perfect opportunity to basically adopt to those changes and reflect those changes within your app. And, uh, one of the other thing is like, you know, if you're studying the background color on the layer, because layer is basically a more closer to like painted, basically you need another run cycle actually to update the layer background color, so it's always preferable. Ah, it's alright. It's always preferred to basically call uh, basically that those changes within the layouts of use of all that. Will you be assured that your layer is also updated? Estimates the appearances objected. So there color Because this present, it represents insee jugular. It does not flick or anything like that. It actually reflects it right away. So that so we're gonna do begin, actually adopt to lay out some views, and we're gonna simply call super dot layouts abuse first. And then after that, we're simply going to say, phone label that next color is equal to you. I color named, and we're gonna name basically give it our, um, color name. So my gray color is gonna be the name. Now if I run the app right now, what you going to see is basically the color of the phone label. It's slightly different from all the other labels, so I don't know if you can notice, but like your there's a little bit difference between these two labels, this one is a little bit more faded than this one is. Now, let's go ahead and switch the appearance and see how it looks like. So I'm gonna change dark appearance. And because we have selected, we have adopted to our, um changes to basically ah, layoffs of use. We're going to see those changes reflected right away without any flicker. And as you can see, our phone number is standing out little bit more than all the other fields. I like this a lot better. So this is how you can actually create your own custom color sets and then basically start updating those color steps in applying those color sets to various different elements, depending upon your need And depending upon the appearance that you're choosing or your APP is actually adopting two. Okay, so this was Ah, this is a short video about, like, you know how you can make these color changes into, ah into the into the app using code. And in the next video, we're gonna talk about how you can actually choose a different image based on the situation based on the appearance. So for lighter prions, a different image and for dr appearance, different image. So I'm gonna I'm gonna choose, actually, a couple off different images are from the Internet, so you feel free to choose whatever you want to. And ah, the other thing we're gonna do is we're gonna build out a detail view in the next video so we can actually work on the details here and expand this app a little bit further. Okay, so I'll see you guys in next video. Thank you. 7. Using Custom Colors Based on Appearance: Hello and welcome back. And in this video, we're gonna be talking about images and how you can change image based on the appearance that your ah, that system that your app is running on has adapted. Okay, so let's go ahead and get started. Um, I'm gonna choose. I'm going to go to the assets, start X CSF's and going to choose a new image. Sat in this time. So I'm gonna select make this, like, leave it like image. Um, and we're gonna do is we're going to select the appearance to be any and dark. So we have, for we have two sets available for both any and dark appearances. Okay, next thing I'm gonna do is import some images, so I'm gonna say for Dark Moon, I'm gonna show this image, and I'm gonna just put the same image for all three scientists and for the light mode, I'm gonna keep this image. Okay. All right. This one right here. Like Okay, so now we have our images ready, basically, depending upon which mode we how are we are in? So now let's go ahead and create a new of you controller within our storyboard. So you have you control her and ah, it's you. I ve controller is going to be is gonna say Guede from Thea from the table you control us, we're gonna select show and we're gonna say details. Okay, now, in this, as you can already see how the way it's gonna basically look like So it's already showing you the preview that this is how you gonna design your app. And now we're gonna basically drop us fall an image. So image view, Um, that's scared. And we can expand it a Liberte at some constraints. So 27 or 25 is get from top 2020. And here's a written fighters are good. So let's leave it there and let's see what we are missing here. So we need exposition. So we are going to say it's oops. How so? We forgot our trail ings unless he would were missing. Okay, So we do. We have you have aspect ratio just for height, and we have with area trailing and we have leading. Okay, so this I don't understand why the trailing is because we are actually providing them because we have providing with okay, we should not have with and we should only have trailing that waas. That was quite uh all right. Okay, that's that's correct. Now it is looking good. Um, so we need to go and ah, drop a few labels here, so let's drop, um, label like so. And we're gonna make copy of these. Okay? And once again, these are gonna be name for one email and address. It's constrained these at all. - All right, there we go. Let's increase the size for this one to be 20 points. It's on to be 18 and running or get cell. Let's make sure this one is bold, honest, semi pulled. And we're going to give this label color. This is secondary, secondary and secondary level color. Okay. All right. So now we're gonna create every controller, so that's good. And add new file cooperative class. You live. You controller details BC, and we're gonna create that. All right? It's got a storyboard set. The u controller to be detail. You see, let's go ahead and create some outlets in an object. So, um, possible we are going to need an object that we're going to receive from the table view the selected object the selected contact. So we're going to simply say our contact is my off my contact type ison optional. Then we're gonna need some I'd be outlets, - all right, And, ah, what we're gonna do is we're gonna simply say that whenever the contact has something, so it's not mill bonus and these labels and said these controls basically. And this is where we're gonna actually say we need to select named image. And remember, this name is basically the name off the asset that you have created the image not any of these names, but their name off the asset. So when you go and do that is actually gonna basically pick up appropriate image. Depending upon the appearance your OS is in, let's populate the rest of these, All right? Now we're gonna go ahead and and and connect These are basically outlets. Okay, so now we're gonna go back to our view controller, and this is where we can actually ask our table. We whenever user selects a night, um, to send that particular selected contact to the detail view. So we're gonna have simply ah, overwrite one of the function or implement one of the function uh called Did select a role . And in next bat and are we gonna selectee? We're gonna get the selected contact and the way to get the car a selected contacted basically dividing because your mod more doing here using model is operator for two. We're gonna divide basically our index path dot role by two. And when we divide that, we can actually get because half of remember, half of the rules are filled with the divider. So when we divide by to begin and get the selected the actual selected contact, um, and, um and then are you going to say let we see not everything performed Segway. So perform Segway with identifying details and center is going to be selected contact. Okay, now we're gonna override prepare for Segway. And we have say, if Segway that identify air is equal to details, our view controller is basically saying we're not destination. Basically, Secretary destination is a view controller off type detail, V C. Now this is are we gonna get handled to detail the sea and we're gonna set its contact to basically sender, which is gonna be costed as my contact like So Okay, let's make sure that our DEET are Segway identifier is actually details. So let's go ahead and make sure that is good right now, we're gonna actually simply run our app and take a look Ads if we select a contact if it's launched correctly or not, So all right. As you can see, it's actually so, Audrey, it's actually not how flaunting the correct one. Um, let's see what's going on. So we have our contacts, and, uh so I can bet you that this is rare. The selected context is basically getting it wrong. So let's go ahead and get this. Um, here it is. Model ists, then return from here. Okay, Otherwise, do this. Let's try this out. All right, so this is very strange, honey. All right. Okay. So I'm gonna have to debunk this, Basically see what's going on. Anyways, let's focus on what we are actually trying to do here. So what returns do is basically the image selection. So the image, depending upon the appearance, the different images, is gonna show up. So lists, click command shift, double edge. And we're gonna change our appearance to be a light mode and go back. And there we go. We have different image off. Selected for different for different appearance. Okay, so let me Ah, pause the video here, Let me see. Like, you know, if I can find what's going on with the, um how did the math here That we're trying to actually extract the the the contact out, And then I will be right back, like, you know, and we can see how we can how we can resolve this. Okay. So I will see you guys the next video, and we'll see the resolution for this, I thinks 8. TableView Bug Fix: Hello and welcome back. And ah, in this video, we're gonna talk about the bug that got introduced when we were actually creating these cells. So I found out, actually, Ah, there was a mistake that was made, actually, and made that mistake. Um, Waas. Basically, when we're saying that we need a divider cell and we're actually choosing an even number of cell and basically returning as a divider cell, we are not counting for the contact because index pat dot Rowe has changed. Eso index Patties double now, so there are two rows that are there. So first it's going to be, for example, it's going to be zero, and then it's going to be one. Okay, so the context that's gonna be chosen, it's gonna be for the first index. War says it should actually really choose zero or the first value. Ah, for the contacts. Eso, I hope I hope I'm making sense. But his what's gonna happen? Your contacts, The expat is always gonna be plus one off, like, you know, the contact. So we need actually divide this thing. So what we're doing here is, um we are gonna have to divide this by two. That's going to give us the correct index path for that for role. Now, this is how it's going to render. So we have ESO earlier and we were actually rendering Our first role was not getting rendered. So this guy was not showing up. And the result of your seeing after selection was actually correct. So because it was not rendering, that's why we're not seeing it. But now it is correct. So as you can see, if I select that particular contact, it actually is the one that is showing up. Okay, so likes travels and travels, right? Stabler's, um, like, So. Okay, so that was the bug that was introduced. So we have fixed act. So let's continue in the next video, and we're going to see how we can basically said the uh said this like a vibrancy or basically a, um, basically a blur view and said that blur, view and basically change. It's appearance based on the tart, more it's automatically selected. But if he have vibrancy, mode selected, then actually looks a little bit different. So there is a different setting that you need to apply. So that's what we're gonna look at. Height salty has the next video 9. Visual Effect Vibrancy: Hello and welcome back. And in this video, we're going to be looking at another control. Ah, the residual effect view or blur view. And we're gonna drop that and see how various different options are now available for us to use. So let's go ahead and launch our object library. And we're gonna look for view visual visual effect with blur and with vibrancy. Okay, so we're gonna choose the one with vibrancy, and I'm gonna drop it right here. Okay? Now, there are a few things that are actually now available within. Ah, I was 13. As like, you know, you can choose ultra thin material, the type of the material for adaptive effects. So, for example, you can choose the take material, which is gonna be a little bit more like, Ah, the the bag is gonna be more a pick or ultra train for the for the for the light. And then you can add vibrancy. Basically, adding vibrancy brings out blends the background view so you can read a little bit more about that. But like, you know, that's another blurred style. So your your background content, like, you know, whatever you're showing within the content is actually shown properly. Now, that actually provides to you a an option for what kind of label? If you have, like, you know, any label within this. So in a safe, you drop a label here. Now, what kind off label this is gonna be? So, um, you can give your label some custom property. So let's said this label to be horizontal and vertical. And uh huh. Let's set the constrained for this one as well to a 61 Any for 80 and the height. Okay, so with that, let's take let's just increase the front. We're not going to change it much, so I'm just going to run it right here, and I just to show you, like you know, how it actually looks. So there we go. As you can see, it's actually how it's blended for the vibrancy mode. Worse things like, you know, if you have it as non vibrancy than it's actually gonna look like a blur blur view, it's not gonna basically plan. Then it's gonna overlay on that. And now what he can do is if you switch your mode, you notice that it's automatically gonna adopt to that change and your label actually appears in a white are color, so you can actually choose different different types for for the label of the same properties apply to this label is all as we left the vibrancy case. So you can actually, uh, he can actually experiment and choose those values. Selects a secondary label or tertiary label. Basically launch your launcher app selection with that. And this is how it's gonna basically blend says you can see how this is actually blending in with the vibrancy. So adding that vibrancy into this image that is sitting on and, um adding it comes like a watermark affect eso You can change all these values and the content off the ah blur view it's gonna adopt to those changes according to the style that has been chosen by the OS for its appearance. Okay, so hope this was helpful. This was another edition. So I just wanted to cover this one, and, um, in the next hour video, we're gonna be talking about how we can opt out Ah, from these changes. So let's say if your app doesn't want Teoh adopt to adopt to basically the dark mode or certain views don't want to be. Ah, don't want to adopt to the dark mood in that case how we can actually escape that that route. So I'm gonna talk to you about that, and then we're going to wrap up the ghost. Okay, So I'll see you guys in next deal. Thank you. 10. Opting Out of Dark or Light Mode: Hello and welcome back. And in this video, we're gonna be talking about how to opt out. Ah, for ah, the dark mode. So, for example, let's say if you want to have the situation where your detailed view, you always want to present it as a light mode. Okay, so in that case or dark more, whichever you prefer. In that case, what you need to do is simply you need to override users interface down. OK, so you see, what he's simply going to do is, uh, you gonna say in your view, did load over ride user interface style and you're gonna make it either dark or light. So let's say if we say light in this case and I'm gonna run this now because we are in the dark moored whenever we going to go into the detail. It's always going to be the white the light appearance. Okay, so changing appearance is not gonna matter. So it is not flipping, Really. It's just like, you know, keeping that view same. So it's always gonna be that he is always gonna be same. Regardless, it's not gonna owner anything that is system related. So system appearance change change is not gonna affect it. Similarly, you can actually choose dark mode and always launch a certain page into the dark. More so. For example, he always launch your detail into the dark board, and that's gonna work as well. Now that's Ah for a view. Now let's say if you don't want to do this and if you want to completely opt out off the dark, more supporting dark more our Dreckman. But you might have a valid case for it. Ah, like I said, Apple does not enforce this right now that they actually recommend supporting both light and dark mood. So our next my recommendation would be to keep both of them. But for any reason. If you don't want to do that, you can actually do it very easily. So if you go into your info dot p list and go and add a new key and the key is going to be you, I you there inter faith style. So user interface style. That's where it's gonna change, too. And you just give it a value light or dark so we can try our boat. So let's say if it's light and we select our mode Our appearance to be dark and go back to our app Our app is always gonna be in the light state Okay, So you always gonna have that light state and for our app situation. Now let's say if we choose our mo to be dark always, um, in that case, it we launch relaunch a rap in the dark moored it's gonna look as dark mode. But if we switch our appearance to be light and go back to her app, it's always gonna be in the dark mode. So in case if you want to just stick to 11 kind and and and one type of off appearance on Lee and you don't want support that dynamic change depending upon the system settings, then you can do that by adding the ski into your in for populist. All right, so this actually brings us to the end of the video. If there's anything new, I'm gonna be posting that into this video. If Apple comes out with something new Ah, new recommendation or a new addition like a said I was 13 is still in beta, so you never know what can what can come in and what can go out. I mean, although, like, you know, it's so far down in the, um in the game that I don't think Apple is going to change much. Ah, but they might introduce few knitting, so I'm gonna keep an eye, are on it for you guys and going to keep updating a pleading you all If there's anything I see that's actually worth noting hope you guys enjoyed this video. Please. Um, please leave us some good feedbacks and I'll see you guys A with a new course in a near future. And thanks again for watching.