Theming and Styling Ionic 5 Apps: Toolbar and Menu Example

Theming and Styling Ionic 5 Apps: Toolbar and Menu Example

In this tutorial, we'll see how to theme and style Ionic 5 Apps with the Toolbar and Menu example.

We have been building hybrid mobile apps with Ionic 5 and Angular for a couple of months now. One of the trick things about Ionic 5 is styling and theming.

In this article we'll show you some tips on how to do styling and theming for the latest Ionic 5 version.

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

Changing Ionic 5 Theme Colors

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

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

    );

Next, 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 5 Predefined Sass Variables for Theming the Toolbar

Ionic 5 also provides also a set of other predefined Sass variables For styling the toolbar 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;

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 the ion-content scrollbar?

For previous versions of Ionic 5 you can use the setScrollDisabled method to disable the scrollbar but unfortunately starting from Ionic 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 these CSS styles in the src/app/app.scss file.

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

Ionic 5 side menus can be created using the <ion-menu> directive. Here is an example of an Ionic 5 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 Ionic 5 Toolbar (ion-toolbar)

To style the Ionic 5 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 the 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 5 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;
        }    
    }

Conclusion

In this quick tutorial, we've seen many tricks to add styling and theming to your Ionic 5 toolbar and menu components and how to change your default theme colors.

  • Date: