Apple (Think Different)

Speaker 0: Welcome back to the show. I'm your host, Bry Ross. I thought you might join me with just a little breathing exercise before we theme today, just to bring us all down to the baseline vibration that we wanna be on when theming. Care to join me? Great.

Alright. So let's take a deep breath in and out. That's perfect. Right. Let's dive into our theme today.

Today we are going to be painting a beautiful apple theme. So I always start any project. Couple things. We want to make sure that we've got a properly prepared canvas. And for us, that means we've gotta have a nice data model with some data in there.

If you don't have any sample data, you need some. Theming, you gotta be prepared. You gotta have that base layer to really properly theme. And then I always set up the project settings. So now that we've got that out of the way, we can go in and start theming.

So let's go in and just take this Apple logo, looks like it's an SVG. For whatever reason, it's really hard save SVGs that are embedded. So I'm going to open up Versus Code. We're just going to save this SVG out to a file and then we're gonna import that, upload it into this particular project. Alright.

So we're gonna save that and just paint that project logo on there. Looking great. Looking great. Apple logo. Amazing.

Alright. For our public foreground, what are we gonna do? We're gonna do the same thing. We wanna use the Apple logo. I don't see any text with Apple on it, so we're just gonna use that same bit.

I'm gonna take and pinch my palette knife and just dab that logo on the public foreground there. Again, advanced technique, work your way up to it. But just this dabbing and just a little turn can get you great results in your themes. Alright, so next little known fact, but you can include MP 4 files as a public background. So static images, great.

Beautiful. Videos, even more. Wow. Really upped the wow factor on that. Makes you feel really welcoming when you log in and see a publicly beautiful log in page.

Alright. So now we're just going to save a little bit. We've got got the basics of our theme. We've got our brand in tact. Now we just want to pull this theme out of the Apple website, out of our psyche, out of our out of our chi.

And we're gonna do this using the directest minimal base theme. Lots of white space, lots of white space. We've got lots of, room to breathe here and that's really what Apple does well. Inside their design, lots of webs with these. They let the products shine.

Alright. So we're gonna go into our modules now and let's just remove all the borders. I'm seeing this. I'm seeing the vision. We're not gonna have any borders on this.

So we're just gonna paint over all those pretty borders. Great. Great. Looks really good. Okay.

This looks really solid. Alright. So what I'm gonna do now, I'm looking for this subtle gray background that they use. The hex code is actually f a f a f a. In reverse that's AFAF.

And this theme is calm AF. Alright so we're gonna go in and I want to adjust the logo bar, module bar logo, so we're just gonna edit our custom CSS there. Just, just give it a little background. Alright. Okay.

And then anytime you change colors, you definitely wanna dive in and make sure you dust those demons out of it. Make sure those hex codes don't get stuck in your number pad. You really gotta take extra special care of that number pad. Alright, so we're gonna put this down. And now we've got this really nice looking canvas.

It's all white, except we we've got a little border up there at the tippy top that we want to get rid of. But everything else looks it's really nice. Now one of the other things that I noticed on the Apple website is this large border radius around these cards. So if we look for this we could see the card global corner radius is like 28 pixels. This is rather large, but maybe let's dial it into like 18 pixels and see what that looks like.

That gives like a nice clean effect. I'm feeling this. Do you feel it? Yes. You're doing great.

Just keep following along. Let the spirit of the theme guide you to the final output. Alright. So, we're gonna pick up our half inch brush here and we're gonna look to dial in this border width on the project. Just like that.

Just a quick stroke of your brush. You can blend that in, and there are no mistakes. There's only happy accidents and opportunities to paint a better theme. Alright, so within our header we're also going to look to remove that border so we can see it there inside our CSS properties. Border bottom.

So we're just going to look for the border width inside the header and there we go. We've got this nice no border subtle effects. It looks great. Alright, so now what do we want to do? We want to take a look at our fonts.

And we're actually using the system UI fonts. And I'm on a Mac as I paint this beautiful theme so we don't necessarily have to even use a different font. And that probably we cut this part here. I do all this and, get, like, a Kors error for this. So maybe, again, like, we cut this out, cut to some point in the future.

Where is it? Where are you? Where are you? Cut. This is not gonna work.

I think I'll find the course issue here. Open up the console. Great. Don't even need it. Can't use that font either.

Yeah. Unfortunately, nope. Not doing it. System UI. Okay.

Alright. So now within our SANs family we're just going to use the system UI as well and that should adjust all the labels within our forms to use the system default font. Now there's one other thing that I see that I wanna adjust here which is just this search input. So we're gonna go into our CSS settings here. We're going to go to our light theme customization inside our project and we're gonna change this background normal to the same white Xcode.

Emphasis. Alright, so this is looking great. We'll just paint on a few final touches of this particular theme and we're gonna log out and we've got this beautiful public login page with a very stunning video for the viewers to log in to. That's it for this episode of The Joy of Theming. I hope you've picked up a few tips and tricks to use in your own themes.

I'm not an expert, you're the expert. Thanks for following along on this journey. We'll see you.