SwiftUI Tutorial – Implementing Dark Mode on iOS and Custom Colors in Xcode 11

SwiftUI Tutorial – Implementing Dark Mode on iOS and Custom Colors in Xcode 11


Hi, Alex here from rebeloper.com.
In today’s video let’s implement dark mode in your app as simple as… If you are interested in
building out this project with dark mode then make sure you keep on watching.
Hit that subscribe button, open up Xcode and let’s dive in. So let’s take a look at
what we are going to build out today. Well basically we’re not going to code
that much but you will understand how to use light and dark mode with colors in
SwiftUI. So I have just run this code SwiftUI dark mode and if you want to
take a look at the full code go ahead and click the link of in down in the
description to get access to all of this nice UI layout and SwiftUI.
But today’s topic is dark mode. So that’s why we said that dark mode rocks here and if
we go to settings here and let’s see. If you just scroll down to developer and
select dark appearance under the appearance and go back you will see that
indeed our app has a dark mode reflection here, okay. So how do we
actually get this. Let me just go back to white mode again go ahead and take a
look at the current version of the app. Current appearance of the app and once I
just go into light appearance, let me just go back there and as you can see
all of the colors have changed the background color, color on the icon here.
So we are going to dive deep into this to date and if you feel like it go ahead
and take a look at this awesome content view and what you need to know here is
that you can actually get the color through its literal name and here we
have accent and here we go accent
and the background shadow and again a background shadow. Let me just
show you what these colors are, okay. If we just open up this you will see that
under appearances we have in this project any and dark and here we have
our any appearance color and our dark appearance color. But by default if you
create a new one let me just create a new color set here and I will name this
test, okay. And as you can see it’s universal of course because of the devices but under appearances it says none, okay.
Because this is just a default value it doesn’t really support right off the bat
like in the dark mode, okay. So to change that just select any or dark or any
light and dark. Now what’s the difference between any dark and any light and dark.
Well basically any means iOS 13, prior iOS 13 and life is the default value
for iOS 13 and dark well it’s not the default values the default light
appearance and the default dark appearance. So if you choose any and dark
that any on iOS 13 will be the light mode by default, okay.
So that’s the gist of it and yeah I have created for the other colors any and dark but let
me just go here and select any light and dark and as you can see all of them are
not white but if we wanted to we can change the light appearance here and
then the dark appearance. Okay and how to use it let’s just go
into the content view and for the foreground color let’s use this test and
this will change the foreground color of that card that you will see in just a
moment here, there we go. It’s blueish just like this one, okay. Let me just show
you side by side okay and if we go and select the dark appearance
then you will see this awful brown. Okay, so let’s revert that.
Let’s go back command C and use this accent color. Now if we just scroll a
little bit down here you will see that we have this foreground color of primary
for the moon circle image and the secondary is the foreground color for
our text. Now this is also selecting the current appearance of the device
automatically. What I mean by that is let’s just build and run again and you
will see that the moon circle system named image is this one.
So it’s whitenow. But if I just go ahead and select the light appearance you will see that now it’s a black
indeed and the same goes for our secondary color of our text.
Now this is useful because maybe you just don’t want to tweak your colors in the
assets catalog you just want to use the primary and secondary. It’s useful for
title subtitles and so on, okay. Now if you do like dark mode go ahead and
comment down in the comment section below with #rebeloper and your
opinion about a dark mode. Throughout this video we learned about implementing
dark mode on iOS and custom colors in Xcode 11. But I want you to hit the
notification bell because in my next video I’m actually gonna talk about MVVM
in SwiftUI. If you’re interested make sure you hit the notification bell so you
don’t miss that video. In the meantime while you wait for that video make sure
you also check out these two videos that I have over here. I talked a lot about
iOS development SwiftUI and how to code better.
So make sure check out these videos as well.