1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Exploring the Special Features of iOS

Dark Mode

Contents

keyboard_tab
Special Features
2
Dark Mode
PREVIEW13m 28s
7

The course is part of this learning path

Dark Mode
Overview
Difficulty
Intermediate
Duration
1h 22m
Students
2
Description

This course focuses on iOS special features including face recognition, custom keyboards, sticker packs, and more.

Intended Audience

This course is designed for anyone who wants to:

  • Learn about iOS development and coding
  • Move into a career as an iOS developer
  • Master Swift skills

Prerequisites

To get the most out of this course, you should have some basic knowledge of iOS.

Transcript

Hi. Within this lecture, we're going to learn about Dark Mode. So, with the coming of IOS 13, Apple has introduced Dark Mode into our lives. Okay, so let me go to Google and show you what I mean. So, if you search for Dark Mode IOS 13, you will have a lot of results. Of course you don't have to do that. I just want to show you the Developer documentation of the IOS 13 for Dark Mode. Okay, so I'm going to go into the developer.apple.com and read the documentation. You don't have to do that. I'm just going to show you that there is a Dark Mode and we will use it. So, what is Dark Mode? So, it basically lets users choose whether they will use their phone in the light mode or dark mode. So, dark mode means black backgrounds, okay, white labels, white texts, white strings. Rather than having a white background with a black text, now users will see dark backgrounds with white texts. Of course it doesn't end there, when a user chooses Dark Mode in their phone, it completely turns the phone into dark mode in every menu in every app. Okay, so you have to be ready to use this in your own apps too. So, I'm going to show you how to do that, we're going to create a very basic app so that we can see what it is to work in dark mode. So, I'm going to choose a Single View App as usual. I'm going name this DarkModeApp or DarkMode. Okay, we're going to have only two View Controllers with two views inside of those. So, let me click 'Next' and let me put this under my IOS Complete folder. Once we create our project, I'm going to make this into full screen so that you can see it better, and I'm just going to go into the Mainstoryboard. So, here as I said before, I'm going to have two View Controllers, in which I will have only one button and one label, so that we can see how they would react in Dark Mode. So, let me search for View Controller and bring in one. Okay, and here I'm just going to add a button, and this button will segue to the next View Controller. Okay, that's all this button is going to do. So, let me make this a little bit bigger and here you go, I'm going to name this Change. Okay, Change button because it will change the View Controller. And I'm not even going to bother writing this segue code, rather I'm just going to do segue from Directly to this button, from this button to this View Controller, and I'm going to embed in a Navigation Controller so that we can see how Navigation Title, Navigation Bar will behave in Dark Mode as well. Now we have this Back button and we will see the color of this Navigation Bar as well. So, in the second View Controller, I'm just going to have a label. I'm not even going to have a View Controller assigned to this View Controller, like a View Controller Class, okay? Because we only want to see how this label will change. I'm going to call this Dark Mode, and as you can see we have a white background with dark black label. Okay, so let me give this to and this one to some Constraints. Okay, so let me add these Constraints as well. So, here we go, we are actually ready. And the final thing, I want to define this button into my ViewController. So, let me open my assistant editor over here. Okay, so that I can bring in this button to my coat, and I'm just going to bring this in as an outlet, not as an action. So, make sure you bring this into your viewController by clicking and dragging and dropping it, but rather than Action, just choose Outlet and say changeButton. So, we have this Outlet over here because later on I'm going to change the color of this button, okay? So, let me just first test this and see how it looks like in Light Mode and Dark Mode. Let me open my Simulator, and here we go. I believe we are ready, so let me just see if this is done. Let me open my Simulator. here we go, we are still waiting. Let me minimize the whole project from here so that we can only see the app. Here you go, when we click on the 'Change' button it takes us to the second View Controller and so on. So, this is pretty basic, but let me take this into the Dark Mode. So, in order to go into the Dark Mode in IOS 13, you will be able to reach it from the General Settings or Appearance Settings, but right now in the Simulator we have it under Developer, okay? So, if you go to Developer you will see this Dark Appearance. If you cannot find it for some reason, you can always search for it, right? So, let me close this down and... No, I don't want this as well, so let me come over here. If you swipe to the left one more time you can have the search bar. And over here you can write dark, and it will give you Dark Appearance. Of course you can search for Dark Appearance as well, and you will see the related menu. So, when you click on that, it will take you to the same Developer menu and here you go, once I enable it, now my app and my phone is actually in the Dark Appearance mode. Now I see the black background rather than this white background, right? And I see texts in white rather than black. Now let me go to my app and here you go, my app is changed as well, because it affects all the apps and all the phone related menus and everything inside of our phone. Now I see the labels in white. Okay, so this is cool, right? And it auto adjusts itself actually, so if you're working with black it will turn it to white automatically, but you have to be sure that this is working, ,for example, in this button it's shown in blue and I believe this is the default behavior, but for some reason you may want to change this, right? Maybe you may want to, maybe you want to actually show this in white rather than blue when user chooses dark mode. So, we have to find a way to understand if the user is using their phone in the Dark Mode or Light Mode. So, is there a way to do that? Of course there is a way to do that, we're going to test to see, we're going to check to see if the user has chosen this style in their phone so that we can change whatever we want. Of course this is not mandatory. Maybe we are satisfied with the current look, current behavior, but if you are not satisfied, if you want to customize, now we would have to know how to do that, how to reach that variable that use the user is using their phone in the Dark Mode. So, it's called traitCollection. So, as you can see this is UITraitCollection, and this gives us the traits such as size class or scale factor. So, they generally describe the current environment. So, if you want to get something out of current environment, then you're going to use this traitCollection. And if you say traitCollection, okay and if you scroll down a little bit you will see something called userInterfaceStyle. So, there are some other aspects as well, but we're not looking for userInterfaceIdiom or Level, but we are interested in the userInterfaceStyle. So, if you double click on that, that's what you want to get. So, let me assign this to a variable and then you're going to see this is exactly the thing that we are looking for. So, I'm going to call this userInterfaceStyle, okay? And if you check if userInterfaceStyle' okay, with a double equal sign, if you say  . you will get either dark or light, or you can get the unspecified as well, but most of the time it will be either dark or light. So, we are particularly interested in dark right now. So, if user is using their phone in Dark Mode, maybe I want to show the changeButton in white color rather than blue. So, how do I do that? It's pretty easy actually. I already have defined this button as an Outlet in my code, right? Then all I have to do is change the color of this button. So, if you say changeButton.color and you have to say tintColor in order to reach the title color. Okay, so you have to go for tintColor and you can just say UIColor.white, for example. Now this will just make this into white when the user is using their phone in Dark Mode. Of course you can just state the else as well. You can say changeButton.tintColor UIColor.blue. So, if the user is using their phone in Dark Mode, then just do this button in white, if this is not the case then go for blue. So, here you go, now I have the white button over here. So, text didn't change, it was already in white, but now my button has changed. So, let me come over to the settings and try to make this into Light Mode. So, once I do that it should turn into the Light Mode. But here you go, it didn't turn, now I see my button in white and I can't even see it. So, button is over there actually in the center, but since I did that, viewDidLoad hasn't been called and I wasn't able to change the button into the blue tint color. So, if I try to click on the button right now it won't click actually. So, let me try it and here we go, I can click on it but I cannot see it because it's in white. So, it's kind of not what I'm looking for, right? So, I want to be able to run this code whenever I see this screen. Maybe you would think that, let's do that  in viewWillAppear and it would work. It can work, let's try that. Let's go to viewWillAppear, okay? And as you can see if I run this one more time, it will display this in blue because viewDidLoad gets called when I run this from scratch, but we have to do it in a consistent way. So, let me cut everything from here and paste under the viewWillAppear and see what's going on. I couldn't do that, so let me try it one more time. Here you go, now let me run this one more time and see if we can get this. Yeah, we have the white now, we have the blue button and it's exactly what we wanted. But if I change this and if I come over here it didn't change. So, viewWillAppear hasn't been called. So, if I go over here and come back it will change into white, but it wasn't called in the first time I came back from settings, so maybe it can be a rare occasion that a user will change its appearance while using our app. But even so, we have to figure out a better way to handle this situation so that when a user changes the style, then we will adapt our app to that style if we want to. So, how do we do that? We're going to see how to do that in the next lecture.

 

About the Author
Students
420
Courses
55
Learning Paths
3

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics