How to change the toolbar color in Ionic 4

Question

I am working in my Ionic 4 app and I want to change the background color of the toolbar but it is not working.

This I have tried:

ion-toolbar {
    --background: #f2f2f2;
}

ion-toolbar {
    background: #f2f2f2 !important;
}

Like:

color: var(--ion-color-contrast);

where to define the --ion-color-contrast. In variables.scss file or some where else for changing the color.

Can anyone help me how the define the variables in the variables.scss for changing the colors in Ionic 4.

Answer 1

HTML:

<ion-toolbar [color]="dynamicColor"></ion-toolbar>

Set color in your variables.scss file

$colors: (
   blue:    #387ef5,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,  
   dark:          #222 
);

In your .ts file, you can initialize your "dynamicColor" variable to the default color

private dynamicColor: string

constructor() {
   this.dynamicColor = 'light';
}

You can change color by calling function

changeToDarkColor() {
    this.dynamicColor = 'dark';
}

Answer 2

This should work:

// global.scss
ion-toolbar {
  --background: #f2f2f2;
}

Just confirmed it on my environment, it's not so obvious with this colour because it's quite light so try it with something darker like blue just to make sure it's changing.

Reference documentation

The colours are defined in the theme/variables.scss file, you can use this handy generator to help create the css which you can then just copy and paste into the variables.scss file and then reference the colours using var(--ion-color-primary);.

Answer 3

ionic 4 variable.scss:

--ion-toolbar-background: var(--ion-color-primary);
--ion-toolbar-color: var(--ion-color-light);

for custom page :

<ion-toolbar color="primary">

for custom css:

.my-toolbar{
    --background: var(--ion-color-primary);
}