Ionic_Theming
Now that we have the app running in emulator and the initial Menu set up, it's not a bad time to think about the general design, or the theme of the app.
Google's Material Design has a recommended palette of colors that play well with each other, and that they suggest to be used in mobile apps that are following the Material Design principles. You can find this color pallet at the following link.
There's also plenty of useful websites that can be freely used and that can help you select the right colors for your app. The one of these websites is called MaterialPalette, and this is the website that I used. On this website I've chosen blue as my primary color, and amber as the secondary one, and then the website showed me 8 different colors for different elements of my app.
Changing the general theme of the Ionic2 app is pretty simple. All the major colors for components are placed inside a file app/theme/app.variables.scss. All I needed to do was to change the existing color variables with the color values I got from the MaterialPalette website, and the buttons and other components that used the default color variables will now render in new colors. Below you can see the color variables that I've set in the app/theme/app.variables.scss:
$colors: (
dark-primary: #1976D2,
primary: #2196F3,
light: #BBDEFB,
text-icons: #FFFFFF,
secondary: #FFC107,
primary-text: #212121,
secondary-text: #727272,
divider: #B6B6B6,
background-color: #FAFAFA,
danger: #f53d3d,
dark: #222,
favorite: #69BB7B
);The syntax above is pretty similar to css, but it's not quite css. As you've probably noticed already, the file where I'm declaring these color variables has a weird extension. The .scss is the file type for SASS or Syntactically Awesome Style Sheets. The jist of *SASS is that what you put in your .scss files is exactly the same as what you would put in .css files, you can just do a bunch of additional cool stuff as well like define variables that can be reused in multiple areas. These .scss files are then compiled into normal .css files. You can learn more about SASS here.
Ionic2 is using SASS variables a lot, and is also providing a simple way in which we can override them and, basically, change the way our app is rendered. There's a doc in official documentation that gives a list of all these variables that can be overridden. Essentially, all we need to do is add the variables we want to override in app/theme/app.variables.scss and provide a new value for them, like I did in the code sample below:
$background-ios-color: #FAFAFA;
$background-md-color: #FAFAFA;
$background-wp-color: #FAFAFA;
$list-background-color: #FAFAFA;The code above will change the background color of the app for all 3 platforms (iOS, Android, and Windows Phone) to color code #FAFAFA, and it will also change the list background color.
Now that we've defined some colors we can go ahead and use them throughout the app. I started by changing the color of the top navigation bar to my primary color. I achieved this simply by going to each pageX.html file and adding the primary sass variable to ion-navbar like so: <ion-navbar *navbar primary>.
I also applied the same color to Menu header like this: <ion-toolbar primary>. I initially tried to override the sass variables like in the sample code below, but it didn't do anything for some reason, so I had to manually apply the style.
$menu-ios-background: #2196F3;
$menu-md-background: #2196F3;
$menu-wp-background: #2196F3;Finally, I played around with some buttons and text.
<ion-content padding class="page3">
<h2 primary-text>
This is a primary text.
</h2>
<h4 secondary-text>
And this is a secondary text.
</h4>
<button light>Light</button>
<button>Primary</button>
<button secondary>Secondary</button>
<button danger>Danger</button>
<button dark-primary>Dark</button>
</ion-content>You can see the end result of all of this at the end of this page.
From Ionic2 official documentation:
Adding
fabto a button will turn it into a floating action button. This is a material design styled button that is meant to draw the user to take a specific action. Fab buttons are positioned absolutely, and their placement can be controlled by adding attributes likefab-topandfab-left.
I've added this floating button using the code below:
<button fab fab-bottom fab-right secondary>
<ion-icon name="add"></ion-icon>
</button>As you can see, instead of the plain text, I've added an icon to the button. In Ionic2 you can add buttons simply by using the <ion-icon> tag and setting the name attribute, which is the name of the actual icon. You can find the list of these icons that are available in Ionic by default in the documentation.
When defining a color variable inside the app/theme/app.variables.scss file, we could've also defined a color like so:
$colors: (
// ...
twitter:(
base: #55acee,
contrast: #ffffff
)
)Now, if we applied this to a button <button twitter>I'm a button</button> both colors would be applied automatically. Base normally acts as the background color for elements and contrast acts as the text color. This provides a much more flexible control over your styles.
Ionic2 is really designed in a way that allows you to extremely quickly apply and change a theme (branding) of your app, either by defining your own variables, or overriding the default Ionic2 sass variables. You can see the end result of the changes I described in this page in the screenshot below.
After some additional work with the application I decided to change the secondary color to value #FF5722 in order to make the text and components more readable.
