Colors

[00:00:00]
>> We need to still, we're not so far from what we want, but if you look here, what we were trying to achieve. We have some colors and we have some images there, okay, so let's see how to work with that. We saw that we can actually change the color, like the background, and we can find the color.

[00:00:24]
But hard coding the color here, it feels weird, Parco these bath, okay, we know that, so fortunately for us, we don't have CSS here. We cannot create a Global CSS variables or something that, we could create an Instructure with our color palette if we want to, but we do have assets.

[00:00:49]
So going back to my brush navigator, I have assets, okay, it looks like a file, but it's not actually a file. It's a folder with a structure but we have a nice editor here, the first time you see that, it looks a little scary, so we will get there.

[00:01:09]
So at the bottom, there is a plus sign, a very little plus sign, okay, if you click that icon, we can create a new color set, okay? So we can create a new color set and here, we can set a name, so we can create the primary color.

[00:01:31]
So for every color, this is like creating a CSS variable with a color, okay? For every color by default, we can set dark light, so if we use that color which actual color we want to use when it's dark and winds like. If you open now and now we will use this window, that one, we can click on primary, okay, like there.

[00:02:03]
And I can actually say that in appearances, that we don't want to create the dark version, it's not mandatory to have a dark version. So in that case, we have only one color, here we can select the color that we want, but if you're coming from the web, you probably want to use this version.

[00:02:29]
Okay, so in the input method, you can actually type the color, and I already have the colors that we're going to use for you. So in the companion website, in the chapter setting app colors is 3.2, you have the colors that we're gonna use, okay? So I'm gonna just copy and paste this and then push this, okay, so this is the primary color I have.

[00:02:59]
>> How did you open?
>> This one, the inspector, the attribute inspector?
>> We found it, yep.
>> So secondary, it takes some time to get used to this, yeah, it's a new interface. So secondary, these are all the colors that we're going to use, so now every time we need the color, we can reference to this color library by name, okay?

[00:03:31]
That's kind of the idea, so we have primary, we have secondary, we have ternary, takes a while. I already have that done, but I prefer that you see me doing that many times. So in case you are losing one step, you can see that again, one more time alternative one.

[00:04:08]
An alternative to alternative one, alternative two. We are kind of there, okay, and I have two backgrounds, car background and star face background. So from now on, every color that we're going to use is going to point to this place, this is like a global CSS, if you want.

[00:04:39]
So this was card background, be careful with names because it's case sensitive. So typically, when you receive from your designer, in case you are not the designer. The color formation, you do this when you're starting your project and SurfaceBackground, that was a simple one. Surface background, okay, now if you want to get my file directly, I will push this quickly.

[00:05:21]
So you don't need to type every color, so now that I do have colors, how can I use them? Well, I'm going to use them for the background color, I want, in my offer. And by the way, down probably, I don't think I need or I want the inspector panel anymore.

[00:05:44]
So I'm going to remove that to get some more space, I'm going to apply the background here, how can I use the colors that I have shaft set? From the library, remember the library is the plus sign, from the library, there is a section for colors, the last one.

[00:06:08]
So if I go there, I will see my color, so you go to the library and you open the last tab and I can drag and drop. So in this case, I'm going to use card background, so I will put that within the background. And it's just using the color constructor, it wasn't a big deal, so now I can just copy and paste this modifier here, so I need to resume my preview.

[00:06:37]
And now you can see that background color is being used on both, and because I'm applying the background after the padding, it work as expected. Remember that if I do the background before the padding, it's a different situation, okay? Now we need a background image, we're going to work with images for the first time.

[00:06:59]
But for doing that, can you see this, can you spot these blue lines there? What's that? Those blue vertical lines? This is how you see changes from the last commit, and you can click here and discard the last change, okay? So every change that you make, okay, like this, you can discard that change.

[00:07:26]
And also, probably you don't have this, is how you can collapse, so look at that animation, you need to do, wow. So you don't have that because by default, in Xcode, that's disabled, if you wanna collapse different parts of the code. If you want to enable that, you need to go to Xcode preferences and here you have under Text Editing the option code folding ribbon.

[00:08:02]
In case you want that way to fold code, you need to enable that line, it's disabled by default, okay?