How to change background color of header in Ionic 4

TLDR: To change bbackground color of header in ionic 4, use color attribute as follows:

Ionic 4 has some big changes. For example, Ionic 4 framework has introduced CSS 4. One major advantage of CSS 4 is that, now we can define a variable in stylesheet and use that variable in other places of the project.  Previously, we had to depend on SASS or LESS framework to get this benefit.

Although, CSS 4 as well as other new features of Ionic 4 framework make our life easier, many developers are facing problems to deal with these changes. Because, many syntax and rules are new. For example, we don’t know how to change background color of header, where to add global styles etc. Today, we’ll focus on how to change background color of header or toolbar.

At first create a new project by running following command in command line / terminal:

When prompted, select sidebar template.

You will get a full project folder. The folder contains many files. Find out home.page.html.

Open the file in your preferred IDE (WebStorm) or text-editor (Sublime text). Now modify your <ion-header> code (Add color attribute in ion-toolbar tag):

Above code will change background color of header or titlebar to success color. This success color is defined in variables.scss file; You can add more color variables in variables.scss and use them.

Now go to your command line or terminal and type:

If the project compiles successfully without any error, you will see the background color of header or titlebar has been changed to success color.

You can add any other color variable in variables.scss file inside root: block and use that color here.

Leave a Reply