Customizing Ionic App Look and Feel

May 6, 2015

In previous blog post we started exploring the Ionic Framework for building the Hybrid Mobile Applications. This is just a continuation of previous blog post. In this blog post we will see,

  • Various Color Options from Ionic
  • Setting up SASS for our Ionic Application
  • Customizing the Login page with Background Image

So let's get started.

Various Color Options from Ionic

Ionic Framework comes with at least 9 different color schema as of this writing. Let's quickly look at what they are and how can you use one of them while building your application. In the previous example we looked at one of the color schema named assertive. Following is the list of other color schema.

  • light
  • stable
  • positive
  • calm
  • balanced
  • energized
  • assertive
  • royal
  • dark

If you want to change the look and feel of your Ionic App but do not want to spend a lot of time in designing, all you have to do is decide on one or few of the color schema above and start assigning them as CSS classes to your UI elements. Please refer to following CodePen example. I have different buttons applied with different out of the box styles.

See the Pen XbmbNQ by Keyur (@kraval) on CodePen.

So now you know what different theme options you have, you can start appending these classes to all the elements provided by Ionic.

Setting up SASS for our Ionic Applications

Not every application is going to be bound to these set of 9 themes, although they are pretty good to build your simple to moderate application. You might need to change the styles all together or introduce a new color. You can do that very easily by setting up SCSS for ionic project.

Run following command while you are in your application directory.

ionic setup sass

You will see the .scss file in your project structure where you can override the basic or extend the existing classes with your own styles and CSS rules. For now let's just update the color for one of the theme,positive.

Customizing Ionic App Look and Feel

So I have made following changes to our file. I have overridden the positive theme with new color.

Customizing Ionic App Look and Feel

And also made necessary changes to the index.html page header element's CSS class.

Customizing Ionic App Look and Feel

Let's go ahead and serve the Ionic application.

ionic serve

And you will see how the overall theme of the application is changed.

Customizing Ionic App Look and Feel

As you can see with the help of SCSS, customizing the overall look and feel of the Ionic application is pretty easy and straight forward even with all new them.

Customizing the Login page with Background Image

So far it is about using the Themes that comes with Ionic or may be extend those with custom colors. But what if you want to make out of band design changes like adding a background image to your login screen. Which seems to be a very common design these days on mobile applications.

Hey, not an issue. This is just HTML/CSS, so as long as we have the image we can do this change for our login page. So let's do that now. Add following CSS class to your site.css file.

.signin-bg { background-image: url('../img/signin_bg.jpg') }

Let's bring some nice image and store it into your img folder. Add reference of your CSS file in the HEAD section of index.html.

Customizing Ionic App Look and Feel

And run the application, what you have is a login page with Background image in an Ionic application. If you have ionic server running, you will see your changes right away in the browser window.

Customizing Ionic App Look and Feel

Of course this is not the final design, you will have to adjust based on your needs and instructions from the UX guy. The purpose of this demo is to just show how easy it is to modify the styles on Ionic application.

All right that's it for todays blog post. In the next post we will shift focus on how to create multiple pages and ultimately we will see how to connect our login screen to the back end Asp .Net Web API.