How can I change the color to ALL <ion-navbar> in my app?


#1

This is probably a silly question but for the life of me I can’t seem to make it work


#2

You can set a primary colour in app.variables.scss:

$colors: (
        primary: #E91E63,
        secondary: #673AB7,
        ...
);

and then set it in your navbar like so:

<ion-navbar *navbar primary>
    <ion-title>{{item.title}}</ion-title>
</ion-navbar>

#3

That worked. Thank you!

But with this approach I would have to go to each page with an <ion-navbar> and add the color. Is there a global way to change them all at once?