1

I want to change ion-menu background different for every page but it's not working:

app.component.html:

  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content class="app-content" part="placeholder">
        <ion-list id="inbox-list">
          <ion-list-header lines="full">
            <ion-avatar >
              <ion-img [src]="'./assets/logo.png'"></ion-img>
            </ion-avatar>
             Pyramid to True Love
          </ion-list-header>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item (click)="selectedIndex = i" routerDirection="forword" [routerLink]="[p.url]" lines="none" detail="false" >
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
     </ion-app>

app.component.scss(Working):

ion-menu ion-content{
     --background: #59d36d;
}

any.page.scss(Not working):

ion-menu ion-content{
     --background: #59d36d;
}

Is it possible or not?

Govind Samrow
  • 9,981
  • 13
  • 53
  • 90

1 Answers1

0

You can use like this, Ref : Sidemenu background-color in Ionic-v4

ion-menu {
  --ion-background-color: var(--ion-color-primary);
  --ion-text-color: var(--ion-color-primary-contrast);
}
Praveen Patel
  • 349
  • 7
  • 24