Theming and styling Ionic 2 apps -- Words (533)

Ionic 2 styling

I've been building hybrid mobile apps with Ionic 2 for a couple of months now .One of the trick things about Ionic 2 is styling or theming .

In this article I'll show you some tips on how to do styling and theming for the latest Ionic 2 version (2.2.0)

Ionic 2 provides a simple theming system which uses SASS variables and cutsom CSS classes/styles to change components styling .

You can change default Ionic 2 colors by going to src/theme/variables.scss and provides many predefined Ionic 2 sass variables such as :

$colors: (
primary:    #387ef5,
secondary:  #32db64,
danger:     #f53d3d,
light:      #f4f4f4,
dark:       #222,
customColor: #009688

);

Then to use any color inside $colors use the color attribute of the component with the name of the variable . For example .

<ion-navbar color="primary">
    <ion-title>Title</ion-title>
</ion-navbar>

You can also provide your own custom color names .

Ionic 2 also provides also a set of other predefined sass variables such as

$toolbar-background: #123456;
$toolbar-border-color: #123456;
$toolbar-text-color: #123456;
$toolbar-active-color: #123456;
$toolbar-inactive-color: #123456;

$toolbar-title-color : #000;

For styling the toolbar .

To apply custom SCSS styles you have two options :

  • For global styles you can use src/app/app.scss
  • For page specific styles you can use src/pages/xxxx/xxxx.scss files

How to hide or disable ion-content scrollbar ?


For previous versions of Ionic 2 you can use setScrollDisabled method to disable the scrollbar but unfortunately starting from 2.0.0-rc.6 it is no longer available (public) ,so how to disable the ion-content scrollbar ?

You can use direct class name .For example

.no-scroll .scroll-content{ overflow: hidden; } Or even better to hide scrollbar but show it when there is a lot of content

.scroll-content {
        overflow-y: auto !important;
}    

Make sure to add this CSS styles in src/app/app.scss

How to apply custom styles to side Menus (ion-menu)


Ionic 2 side menus can be created using directive

Here is an example of an Ionic 2 menu

<ion-menu [content]="content">
    <ion-header>
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>
    </ion-header>
    <ion-content >
    <ion-list>
        <ion-item (click)="openMain()" >Main</ion-item>
        <ion-item  (click)="openAbout()">About</ion-item>
        <ion-item (click)="openHelp()">Help</ion-item>
        <ion-item (click)="openContact()">Contact</ion-item>

    </ion-list>
    </ion-content>    
</ion-menu>

.menu-inner .item {
    background-color: #387ef5;
}


.menu-inner > ion-header, 
.menu-inner > ion-content, 
.menu-inner > ion-footer {
    background-color: #123456; 
}

.toolbar-title {
    color : #fff;
}

Styling the toolbar (ion-toolbar)

To style the Ionic 2 toolbar or top bar you have a bunch of scss variables which are

$toolbar-background: #123456;
$toolbar-border-color: #123456;
$toolbar-text-color: #123456;
$toolbar-active-color: #123456;
$toolbar-inactive-color: #123456;    

Just put them in variables.scss file and change their values to your desired colors .

ion-header ,ion-content ,ion-footer and ion-toolbar make part of every Ionic 2 page so you can either

Add globals styles to these elements .In this case you need to put them in src/app/app.scss or add specific page styles so for example to style only main page just add styles inside src/pages/main/main.scss

page-main {

    .content{
        background: #fff;
    }
    .toolbar-title {
        color : #fff;
    }    
}

I'm a web developer and technical writer. Passionate about modern JavaScript technologies and currently trying to develop all kind of apps (Web, Mobile and Desktop) with JavaScript.