Ionic 2 change ion-menu color

Ionic Framework ionic-v3
1

Hi,

I want to change ion-menu color. I did the following, but only the buttons color changed. What should I do?

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title color="salamatism">Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="menu-content" color="salamatism">
    <ion-list>
      <button color="salamatism" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          <ion-icon name="{{p.icon}}" item-left></ion-icon>
        {{p.title}}
      </button>
    </ion-list>[spoiler][details=Summary]This text will be blurred[/details][/spoiler]
  </ion-content>

</ion-menu>
2

If you want to change the background color of your side menu, then you need to add a class to your menu content and then go to src/app/app.scss and apply the color you want.

Like so:

 <ion-content class="menu-content myBg">

Then in your app.scss

.myBg{
   background-color:#ddd;
 }
1 Like
3

@mark2k
Thanks, how about the header?

4

color in ionic components refer to colors set in variable.scss.
Add salamatism color in src/theme/variable.scss

5

The header should work if you have declared the color in src\theme\variable.scss

6

@mvrc I have added the color and I am using it in my pages, but here it doesn’t work here

7

@mark2k
Thanks , I have added it, but the color wont change

8

I can’t change the color too ! how could i fix that !!

9

In may case what worked was to placed the style in app.scss and point to it in the app.html <button ngclass= attribute.