CODEWITHSUNDEEP
ionic2ionic3
Yannis_K
Yannis_K

Reputation: 7

Cannot change the color of navbar on ionic 3

I'm trying to set the color of the header like this, but i can't.Any suggestions, in order to change the background color?

    <ion-header >  
  <ion-navbar >
    <img src="../../assets/img/Header.png">
  </ion-navbar> 
</ion-header>

and the css is

 img {
     display: block;
     height: 20%;
     width: 20%;
    margin-left: auto;
    margin-right: auto;
    color: "#D3C3B4x";
    background-color:"#cccccc";
 }

.ion-navbar{
    color: "#D3C3B4x";
    background-color:"#cccccc";
}

.ion-header
{
    background-color:"#cccccc";
    position: absolute;
    top: 5%;
    left: 5%;
}

Upvotes: 0

Views: 1067

Answers (3)

Rory
Rory

Reputation: 3410

Put the following into \src\theme\variables.scss

$toolbar-background: #cccccc;
$toolbar-border-color: #cccccc !default;
$toolbar-active-color: #cccccc !default;

Upvotes: 0

Yannis_K
Yannis_K

Reputation: 7

it doesn't work that, but i did that

loginmodal-page{
    $color:#D1C3B0;
                    img {
                        display: block;
                        height: 20%;
                        width: 20%;
                        margin-left: auto;
                        margin-right: auto;
                        color: "#D3C3B4x";
                        background-color:"#cccccc";
                    }


                    .ion-header
                    {
                        background-color:$color;
                        position: absolute;
                        top: 5%;
                        left: 5%;
        }
 }

and it works fine

Upvotes: 0

sebaferreras
sebaferreras

Reputation: 44659

You can add it to the $colors array from your variables.scss file:

$colors: (
  // ...
  custom-color: #cccccc,
  //...
);

And then use it in the view:

<ion-header >  
  <ion-navbar color="custom-color">
    <img src="../../assets/img/Header.png">
  </ion-navbar> 
</ion-header>

Upvotes: 1

Related Questions