Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Theming and Sass

In this lesson, we'll learn how to theme our app—both with the Ionic Creator visual editor and with the Sass styling language.

2.6 Theming and Sass

Hello, everyone. I am Reggie Dawson. Welcome back to the Get Started with Ionic Creator Course for Tuts+. In this video, we will learn how we can apply different styles to our app. Ionic is built on top of SaaS, which gives us a lot of flexibility in how we can customize our app. If we click on the Theming & SCSS link, we can see the options that we have. A lot of the common features that people customize are already set up for us to manipulate. Normally we would have to use SaaS to change these, but the Ionic team has made these available to us as a drop down, where we can select the styles that we want to apply. Now when we open up this menu, we first go to the Theme tab. We also have the SCSS editor where we can enter any custom code that we can't change to the theme menu. We will look at this in a moment, but in the mean time let's go back to the theme tab. Now in the page in header menu, first we have the menu choice to customize the header background. If we click on this, we can choose the color for the header that appears at the top of our page. Then we have a toggle that allows us to set the page title to show in the back button. This determines whether or not the back button identifies the page that the user will return to if they click on the back button. When we navigate to a page that is linked to another, Ionic will provide us with a back button. Then the side menu header background sets the header color for the side menu. The side menu is available if we choose the side menu template when we create an app. Then we have the page background that gives us a color picker that allows us to choose the color that the background of our app will be. Then if we look at the theme colors, we can change the standard theme colors we have seen used in various places in Ionic creator. This represent the standard colors that Ionic provides to developers. These values are actually SaaS variables that the Ionic team has made available in the graphical user interface. If we click on one of the colors, we will again get a color picker. Then in typography, we have the option to change the fonts used in our app. This is especially useful since I often override fonts by importing them from somewhere else. The Ionic team has been generous to provide many different options for our fonts. Now the iOS default font is currently set to the iOS system font. Now depending on your app, you may want o use a different font. And if so, you can select it from the drop down. You can also change the default font for Android in the same way. Then in the text color, we can set the default text color for our app. We can also change the link color, but instead of a color picker we just have the theme option. Of course, if you think this limits your options, remember we can change these colors to whatever we prefer. Now that we've made a few changes, we will click save to apply the changes and then take a look at our app. As you can see, the minor changes that we made have been applied to our app. Now the options we have for theming our app give us a lot of flexibility, but what if you wanted to customize your app beyond the options that we have in the theming menu. Let's go back to the SCSS editor. Now the editor also provides us a link, so that we can look at the Ionic variables. If we look at these variables, we can see everything that we can change. It should make sense now why the team made some of these available from the Theme menu, as there are so many variables it can be a bit intimidating. At the top of this list, we have the color variables we just looked at. Let's change the positive color through the SCSS editor. Now if we save this, And then add a button, we see that the positive color has been change to yellow. Then if we go back to the Theming menu and look at the theme colors, we see a strike through that let's us know that this color has been overwritten in our SCSS editor. We can also use the SCSS editor to apply classes to the elements we place in our app. Remember that every one of our elements has the classes property. We can use this to apply the classes that we setup in the editor. Here we have added a class that sets up an element to be 400 pixels in height. Go ahead and save this, and then go back to our app. Now I don't necessarily like how the text area displays, so I will make it bigger so that end users know that they can enter multiple lines of text. All we have to do is drag in the text area, then after that we will apply the class that we just created. The great thing about this is that we can apply this class to any elements that we like. Let's say we didn't like our button height, as you can see we have numerous options to further customize our app. Now that you understand how to use Ionic Creator, in the next video we will put together a small app so you can see how easy Ionic Creator makes it to quickly prototype an app.

Back to the top