Change colour navbar header Ionic 2
There're two ways of doing this, based on if you want to change the color only in a single page, or if you want to change it in all the pages from your app:
1) Change it in a single page/view
Just like you can see here
To change the theme, just tweak the
$colors
map in yoursrc/theme/variables.scss
file:
$colors: (
// ...
newcolor: #55acee
)
And then use it in the view
<ion-header>
<ion-navbar color="newcolor">
<ion-title>
HELLO
</ion-title>
</ion-navbar>
</ion-header>
2) Change it in all the pages/views
In this case, you'd need to add the following in your variables.scss
file to override Ionic's defaults:
$toolbar-ios-background: #55acee;
$toolbar-md-background: #55acee;
$toolbar-wp-background: #55acee;
Edit
Hi, how can I add gradient in app/theme/app.variables.scss?
You could add the colors that you're going to use in the src/theme/variables.scss
:
$header-first-color: #AAAAAA;
$header-last-color: #000000;
And then set a rule to use it (in your app.scss
file if you want to apply it to every page, or in the page-name.scss
file if you want to apply it to a single page):
ion-header {
.toolbar-background {
background: linear-gradient(135deg, $header-first-color 0%, $header-last-color 100%);
}
}
Tecnico
Updated on August 04, 2022Comments
-
Tecnico over 1 year
I have this problem... My colour is white right now, my code is like this:
<ion-header > <ion-navbar> <ion-title> HELLO </ion-title> </ion-navbar> </ion-header>
Change color with this opcion is easy (primary, secondary, danger, light, dark)
<ion-header > <ion-navbar danger> <ion-title> HELLO </ion-title> </ion-navbar> </ion-header>
but my problem is when I want to use custom colors. Somebody know how can I resolve it? Thanks inadvance.
Best regards.