Ionic 4 -Toolbar global css not working

Ionic Framework
1

I am trying to set a global style to in global.scss but it’s not working. Any ideas what can be wrong?

// http://ionicframework.com/docs/theming/

@import '~@ionic/angular/css/core.css';

@import '~@ionic/angular/css/normalize.css';

@import '~@ionic/angular/css/structure.css';

@import '~@ionic/angular/css/typography.css';

@import '~@ionic/angular/css/padding.css';

@import '~@ionic/angular/css/float-elements.css';

@import '~@ionic/angular/css/text-alignment.css';

@import '~@ionic/angular/css/text-transformation.css';

@import '~@ionic/angular/css/flex-utils.css';

.toolbar-background {

background-color: blue;

}
2

See https://ionicframework.com/docs/api/toolbar#css-custom-properties

ion-toolbar {
 --background: blue;
}
3 Likes
3

Thank you, didnt check that section. Now that we’re on it…

Could you tell me why this isn’t making my tab buttons background black?

ion-tab-button {
    --background: black;
}
4

Try to use dark

ion-tab-button {
    --background: dark;
}
5

not working still :confused: