Introduction & Project Setup
Hey all, Gary Simon of Coursetro. Today we're going to talk about how to properly theme your Ionic app, and this involves using Sass variables and also understanding how to use the official documentation. So we're going to run through a quick project from scratch so I can show you and then you can gain confidence going forward with really any type of layout theming options or component issues in terms of coloring and positioning and all of that.
All right, so I'm gonna switch to my desktop and the first thing we're gonna do is bring up our console here. Oh, but real quick before we begin, make sure you check out my site course-cetera.com where you're going to find a bunch of courses on modern design and development. A lot are free and others you can access for the cost of buying me like a six-pack each month. That's it. Now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on. Alright, let's get back to it.
We're just going to start a new project. Now, I'm going to assume that you already have the prerequisites installed: Node.js, NPM, and the Ionic command-line interface tool. So we're just going to put ionic start. You name the project ionic-theming and we'll create the side menu template just real quickly. And I'm going to hit Y for yes to target iOS and Android. And so the reason I'm putting the side menu template is simply because I wanted to set up the top navigation bar with a little menu there just to give us something interesting and unique to look at. Alright, so I was just waiting for this to load.
Serving the App & The Dark Theme
Alright, so now let's hop into it with cd ionic-theming and then we'll put in ionic serve -L. Now before I hit enter, I just wanted to let you know that there's this really cool new app from the Ionic team called DevApp. Search for it in the Play Store, App Store for Android or iOS, and it will allow you to live reload and show exactly, you know, as you make changes as you're developing your app on your phone, which is really cool. It's just really, I think, within the past month here. All right, so it's going to load. Alright, so let me drag this over here. Okay. So, I think it's set up by both iOS and Android here in the lab view. And you can see under platforms I have both of these toggled on.
Alright, so the first thing that we'll consider is how do we change the theme from light to dark? Right now we have the light theme. So to do that, very, very simple, of course. Let's open up here Visual Studio Code. I'm going to open up the project here. I'm off screen for a second. Alright, okay. So, to do that we're first going to go to source, and then theme, and then variables.scss right here. So we're going to be working within this file quite a bit. And if we scroll to the bottom to change to the dark theme, you can see where here we have @import "ionic.theme.default". Change default to dark and then save. And as you can see, we now have our dark theme. Very, very, very, very simple stuff.
The Colors Sass Map
Okay, so when it comes to theming, one of the, I would say the most important aspect to understand is right here, the colors Sass map. So this is called a Sass map. You see that it's just a normal variable called $colors then it's opened up into this parenthesis with a bunch of colors with their property and value specified here. Okay, so for instance, let's change our primary color. And by the way, let me split this up real quickly so that we can see on the left and right our code editor along with our project here.
Okay, so this right here, primary is what this button's using. This is that blue, and essentially this is what most components will use as the primary color. So let's say, for instance, we want to change this to a pink type of color. So I'm going to put EC14BE, we'll save it. And there you go. As you can see, very, very, very simple.
But what if we wanted to change our navbar background color up here as well? As we can see, it's pretty much just a dark gray or black color. Well, to do that, let's hop over here to our pages, home, and home.html. And we can see that this is the HTML that structures this section right here. We have the menu icon and we have the home title right here. So what we want to do is add a color attribute equals, oops, primary. Alright, so we'll save that. And voilà. There you go.
Nice. Something to note is that not every single component, and this is a component here ion- and the name of the component, allows you to specify the color attribute. So just know that going forward, and you can really check that out in the documentation. And we'll be checking that out momentarily.
Adding Custom Colors
So let's also talk about how to add custom colors to the colors Sass map that we were looking at. So to do that, go back to our variables and we simply put in a comma. And let's create one called light-dark, which will kind of be an in-between value. And we'll put a color value of #363636. All right, we'll save that.
And now this has been added as a new color in the color Sass map. But one thing to be aware of is you, every time you add a new color to it, it will increase pretty significantly the file size of the CSS, because it will generate a rule set for each one of those components with that color.
Alright, so let's also talk about customizing components based on the actual device. Right here we have iOS versus Android and we can see that there are slight differences, but you will notice even more differences if we were to start integrating some different components.
So to do that, let's go to our home.html. I'm going to hit Ctrl+B by the way to get rid of the sidebar here in Visual Studio Code. And we're going to add a toolbar with a search bar inside of it. So I'll come right here, paste this in. And we'll see it just has an ion-toolbar and an ion-searchbar. And by the way, make sure that, you know, if I'm sitting here pasting in code, pretty much with all my video tutorials here on YouTube, I have a written version. So in the description, you can click on that written version, you can see all the code that I'm copying and pasting. That way, you know, it's not so unfair that I'm just pasting, you have to pause or whatever. So even though this isn't much HTML, but so we have this here. We'll save that.
Okay, so now we can see that significant difference right off the bat. iOS, can't see anything. When it comes to our Android, yeah, this actually looks okay. So how do we solve for some of these discrepancies? Well, the first thing that we can try is if we can add the color attribute here to our toolbar. We'll say color="dark". Let's go ahead and save that. And now that has fixed this. We can actually see what's happening here. Now, however, the Android version didn't update at all. So why is that? Well, what we want to do in this case is we want to check out the search bar documentation. Because that's what this is, we're trying to change the search bar. What if I want this search bar to look like this one over here? Well, let's look at the documentation real quick for search bar.
Using the Ionic Docs to Find Sass Variables
And here's the URL, again, this is linked in the written tutorial. If we go all the way down, we'll see Sass variables. Let me back up real quick. Right now, we're in the API section. So if I go to back to main docs, for instance, and I click on API, that's going to take us where we were. And then we just scroll down and click on Searchbar. As you can see, there's very, there's a lot of different components and they're all pretty much structured the same. They have a Sass variables section right here with a few different tabs of iOS, Material Design, and Windows platform that shows the appropriate Sass variables.
And so the one that we would want to find is because the thing that we want to change, going back to our example, is this search bar input. So if we scroll down, if we click on Material Design, for instance, that's the one we want to change. Material Design is applicable to Android. We'll see that we have, or if we hit Ctrl+F and hit on a background, there it is. We can see right here by default it's colored that way.
So all we have to do is copy this, and we'll go back to our variables and under // App Material Design Variables, this is where we would paste that and redefine it. All right, so what if we wanted to make our light-dark, our custom color in the colors Sass map? Very simple. We simply put color and then inside of it, it accepts two parameters. It's going to be the name of the color Sass map, $colors, and then also the actual color that's defined within, light-dark. So let's save it. And now you'll see, perfect. Now they're much more consistent. All right.
Building a Complex Layout with Cards & a FAB
So let's practice a little bit more with this so you can get more muscle memory trying to figure out how to change different aspects. And it's not just colors, you can also change padding, margin, sizing, all that stuff. So what we'll do is, I'm going to... and by the way, this is one of the points where you're going to want to refer to the written tutorial because there's a lot of HTML I'm about to paste in. So I'll do that real quick and I'll show you which part we're going to be pasting in.
We're going to go to our home.html and I'm going to copy and then replace all of this stuff right here in ion-content. So paste this. So what I just pasted was this ion-content class equals card-background-page. So we're going to have several cards from the components and then we're also going to have our ion-fab, a fab button, which is a floating action button.
All right. So by default, if I just save this, we're going to see that we have some broken images. So we have this assets/images, there's four different images. And again, all this HTML is coming from that documentation. So what you want to do in order to get these images to work is refer to the documentation. All right, background cards with images. We can just take this, we can go and save image as... first I'm gonna refer back here, hit Ctrl+B, go to assets, right-click and reveal in explorer because it's easier showing up right here. And then the section that we want to go in is in assets/imgs. We're gonna simply save them right in this folder. So I'm gonna copy this location and then right-click on each one of these, save image as... And as you can see, I was working on the same thing previously. So we're going to save that there, save image as there, save image as there, and then one more time, save image as. Okay. Alright, great.
So now going back, we refresh this, we now have our images. Now, of course, it still looks like garbage because we have a little bit of CSS to paste in as well. So that CSS, once again, it comes from the official documentation for cards and we're going to go to home.scss and just paste this in and save.
Okay, now it's looking pretty decent. Let me drag this up so we can actually see the whole layout.
Final FAB Customizations & Outro
Okay, so now at this point, let's say for instance, we want to give ourselves more margin for where this floating action button is. Like we think it's maybe a little bit, a little bit too close to the top and right. Well, referring back to the documentation, if we go to floating API, floating action button API right here, scroll down, we can see under Sass variables, this time we have an all, which means they're pretty much global Sass variables that will apply to all three of the platforms. We can see right here, fab-content-margin. All right, by default it's at 10 pixels. So let's say we want to double that to 20. All right, we'll go back, let's close this out and we'll go back to our variables.scss and we'll just put this right here and we'll say 20 pixels. So we'll save it and watch it. And there it goes, it moves in on both of them.
All right, so let's also notice, once we click this, let's say, for instance, we want to change the background color of each of these sub-buttons right here that come from this FAB button. Well let's go back to that same page that we were at and we'll see fab-list-button-background-color. So by default it's at that real light white or gray color. Let's copy that. We'll go underneath it, put in a new color, let's just say color($colors, dark) this time. Save it. And there you go.
All right, so hopefully you learned quite a bit throughout this and really understanding how to work with those Sass variables is that, that's the most important part. And also understanding that you use the official documentation for the components in the API section and that's what's going to tell you exactly what you can change.
Alright, so I'm Gary Simon of Coursetro. As always, make sure you subscribe here and like. Later, coming very shortly, we're going to be starting focusing on creating desktop apps with Electron which is basically doing that with Javascript, and it's really cool. I'm excited about that. Alright, so I'll talk to you guys soon.
