Creating Themes (Swift in Xcode) - Part 1 Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

everybody today I'm going to show you
how to use themes with Swift and Xcode
now part one is basically just showing
you the basics of it so you can actually
go into settings and you can use
switches to change it up a little bit
according to your personalization and
it's a very smart thing to have inside
of applications and then later in this
tutorial we will later go into passing
those settings via throughout the view
controllers so you can have it
throughout your application and keep
that keep it throughout your application
so when they exit out of this
application they will always keep that
theme so let's go ahead and get started
alright first thing we need to do is
open up Xcode and create a new Xcode
project this is going to be a single
View application although this will
apply to any application accordingly go
next and our product name I am just
going to call mine themes you can call
this whatever you want our language will
be set to swift general vices will be
set to iPhone click Next and create now
let's make this a bit bigger and we're
going to head on over to our main dot
storyboard we're just going to add a few
switches on there we will just put that
right on the center there and we're
going to center horizontally we're going
to add some constraints and center
horizontally vertically then we're going
to take this with take another switch
Center horizontally Center vertically
which is by adding constraints by right
clicking or control clicking and
dragging from our switch Center
horizontally and that's it for now now
let's open up our assistant editor and
we're just going to right click or
control click and drag from these
buttons over to our viewcontroller.swift
and this is just so we can actually take
from these switches and do accordingly
so now let's add the Colette and outlet
and this is going to be just our dark
action I'm sorry this is going to be our
dark switch we're just giving these
names basically so when we act we can
actually call these later
now let's right-click or control click
and drag again from these I from our
second switch and we'll call this our
light switch you can call this whatever
you want but basically these switches
will be changing
themes now let's go down here and we're
going to add some actions to these as
well so right-click or control click and
drag from this switch up here down here
and we're going to insert an action in
the name of this action I will just call
this the dark action because it's evil
and connect and now let's right-click or
control click and drag from our second
switch and we're going to insert an
action and this will be our light action
as this is the good action now connect
and now we have a two actions that will
be called any time we press on these
switches now what we need to happen is
we want to turn our light switch off and
our dark switch on when we click this
action right here so if we were to say a
dark switch as we call it write it up
here as we called it right up here we
can say dark switch dot on is equal to
is equal to true and then our light
switch we will say light switch dot on
is equal to false so we're chit we're
just turning them on and off so it's a
switch and now we're going to total down
here to our light action and we're going
to say dark switch dot on is equal to
true I mean to false sorry we want to
turn our dark switch on off and then
we're going to go down here and say
light switch dot on is equal to true so
we're doing the reverse reaction so if
we were to build and run this you will
see that when we click on this switch
right here it turns it on and then if we
do so accordingly just switches back and
forth now one thing you did notice if
you were to build and run that is that
they both build and run like that so
they will they will not change anything
it what as soon as the view loads so
let's go into our viewdidload and we
want to add a couple bools before we
actually get into our viewdidload so
right up here we want to say var dark on
is equal to a bool now this bool will be
a checking whether it is on or off and
then it'll be a true or false
so if we say boo if
a dark on is equal to true or is equal
equal to true as equal equal as a
comparison statement
so if our dark action if our dark on is
true then we want things to happen and
we can say our dark we can basically
take from right down here and say our
dark switched on is equal to true and
our lights which dot on is equal to
false then we can do the same for if we
add another variable and we can say if
our lights which equals boo or R will
save our light on is equal to unbel
again and this is going to check it
whether and see our light switch is
equal to true and then we're going to
write Accord and we're going to do
things accordingly and close curly
bracket and we're going to just take
right down here from this action and put
it like so now another thing we need to
happen is I want to say in my - in my
view controller I just want to change
the background color of my theme so in
order to actually make sure that our
dark on is equal equal to true first
thing we need to do is actually save
whether it's true so in order to do this
let's go down here to our dark action
and we want to create a standard user
default and basically what a standard
user default is is when it actually
saves into the core data of your
application and then you grab it and you
put that inside of your application
again so we can save our I will just
call this dark default is equal to stat
stat NS user default dot standard user
defaults so now with this standard user
default we want to set this at according
as a thing so we want to say var dark
default equals NS user default standard
user defaults so we so we want to say
dark default dot set bool so we're set
and we're going to change a value F for
the bool so we're going to say dart duh
darts which is equal to true so we just
type in true right there and we'd say
four key and this is going to be we'll
just call this a dark default so now
we're actually going to we're setting
this as a bool and we're giving it a key
of dart default and now another thing we
need to do is say var light default is
equal to NS user default dot standard
user default and we want to say slight
light default is equal dot set to bool
so we're setting the spool for the light
switch to false and then we're giving it
the key of our light default and we will
basically this key as something that we
can access later so we're we're setting
this this key right here so we're going
to be able to access it it's putting
this inside of the core data and then we
need to grab that out of the core data
but we're also we also gave it this
value of true or false so now we need to
say just do the exact opposite for our
light action and we could just put that
right in there and just switch this
around right there where it says false
and true so now we are setting our light
default to true and our dark default to
false and now we need to load this up up
here and we can easily do this by just
uh let's copy and paste this real quick
and just put it right inside of our
viewdidload
and then just delete this part where
it's setting a bool so just delete that
little part right there and basically
what we need to do is we have these
variables full of NS user defaults we
need to actually take these NS user
defaults and we need to plug it in and
load it from the core data itself and
test whether that is true or false
accordingly right there so now we need
to say
a dark on is equal to we'll say dark on
is equal to dark default dot devalue or
bull dot sorry bool for key and then
what is the key name we gave it we said
dark default and also be sure to
capitalize things the way the exact way
that you did it before now we need to
say light light on which is the bool
that we created to check and see whether
the light was on and I just realized I
made this error right here this should
be actually B if the light on is equal
equal to true so now we have this light
on and we can say light on is equal to
light light default dot bool for key and
this is going to be our light default as
you can remember we called our keys down
here like default and dark default so
now if we built in R and this actually
first thing we would change because we
didn't change anything wrong with
anything else with the theme so now we
have this on and if we were actually to
build and run this again we I just did
when command shift H to go home and then
we canceled the process so now if we go
back into themes it remembered that
light was our last action and if we go
back and close out of the process we can
go back into themes again and it'll
remember that dark was our option so
that is exactly what we need to do and
now we need to actually take that and do
stuff with this so in order to do this
we could say if dark on is equal to true
we can say self dot view dot background
color is equal to we'll say UI color and
instead of just making the plain old
black color I'm actually going to do an
RGB so just say open parentheses and
it's going to give you this option of
red green blue and alpha so red we're
going to set this to zero point one are
green zero point one I'm just pulling
these out of my head and our blue will
be a zero point one
our alpha will just be 1.0 as alpha
basically means is it see-through no we
don't want that our background to be
see-through at all so now down here we
want to turn our background to a white
color if this is selected and in order
to do that you just need to set
everything to a 1.0 as if you don't know
RGB runs from 0 to 1 so 1 being the
all-white or the the largest amount you
can go and 0 being black so now if we
were to build and run this you will see
that dark was our theme as we last
selected so it automatically set that as
dark and then if we turn this to light
nothing happens because actually we
didn't set that up into our light action
down here it's not expecting that okay
now let's go down here and we're just
going to copy and paste it will be at
what we have right down here and if you
actually want let's actually do this
because I think this is going to make it
a lot easier for everyone so we can say
let's create a function so this function
will run anytime we want it to so we can
say function a dark beam is equal our
dark same and then sit open parentheses
close parentheses open curly braket
close curly bracket then we will also
have a function and this will be called
our light theme now I'm creating a
function as this can actually be
accessed from other view controllers if
you want it and just call it straight
from this view controller so you don't
have to write it int type it in billions
of times so now our darks and we can say
they just put in their self dot
background RGB equals zero point one and
so on then our light team will be 1.0
1.0 and our blue will be 1.0 and now if
we go back up here we can say if Darkon
is equal equal to true we can say our
dark-themed so we're running this thing
called dark-themed and for this we'll
we'll just call our function for light
theme and let's do the same down here
for our dark action so when this is
built
Rann we can say our dark theme will
equal we're just going to type this
right in here inside of our dart a dark
action and we'll just call this it will
just type in dark theme so it calls it
inside of there as well and I'm sorry
this should be light theme and let's
build and run now as you can see we have
our switches and if we were to turn them
on when you actually click on this
switch it actually turns it back on for
you that is it doesn't look too good but
it's probably the best thing that I
could do right now you can probably have
a more a better way of doing it saying
like if you click this button it sets it
to the default or something like that
but I'm not going to do that so now we
have this turning on and off and if we
were to hold in go commands command H we
can go back into our command shift H H
and then go back into our themes app we
can see that it's still on so there we
have it that is how you do that that's
over this part of the tutorial
join me in part two where we actually
will be going over passing these themes
between different view controllers it's
a bit more complicated than I thought so
we will be doing that next time so I
hope you enjoyed this one and be sure to
stick around for part two thank you so
much for watching and I will see you on
the next one that's it for this tutorial
if you enjoyed it be sure to hit that
like button down below and if you want
to see more tutorials like this for me
in the future be sure to subscribe thank
you all so much for watching again and I
will see you in the next one