Changing toolbar text color

Ionic Framework ionic-v3
1

How can I change the ion-toolbar text color when I have changed the $primary color and have that set as the background color on my toolbars? The default seems to be hardcoded to black for some reason?

The specific CSS item I need to change is “toolbar[primary] .toolbar-title” in app.ios.css but I can’t see which scss file this comes from.

2

There’s actually no simple way to do this. The color is coming from a function that determines which color to make the text based on the background color:

https://github.com/driftyco/ionic/blob/2.0/ionic/util/functions.scss#L5-L28

For now you can add this to the bottom of your app.core.scss file:

// Change white to your color
.toolbar[primary] .toolbar-title, .toolbar[primary] .bar-button-default {
  color: white;
}

Could you create an issue for it please? We’re going to need to discuss this. http://ionicframework.com/submit-issue/

3

Done, https://github.com/driftyco/ionic/issues/5445. Thanks.

1 Like