Change Side Menu Color

Ionic Framework ionic-v3
1

Hello

Im trying to change the color of the menu boxes, however nothing seems to work.

What I have done is the following:

First I tried to alter styles.css with the .menu and menu-left without results.
Then changed the _menu.scss file to change the background color there.

Neither of those worked.

image
Screenshot_1.png346×596 73.7 KB

2

When you changed the scss file,have you run your application again i mean, have you used ionic serve --lab for example again, if not you have to do it again, in order to generate the css file again, and if this didn’t work, try to put this line in your “gulpfile.js”

gulp.task(‘serve:before’, [‘sass’, ‘watch’]);

1 Like
3

First set the menu background color for ios/md/wp inside variables.scss globally:

$menu-ios-background: #myColor;
$menu-md-background: #myColor;
$menu-wp-background: #myColor;

If you need to style the buttons inside a list, normal sidemenu syntax that looks like this:

<ion-menu side="left" [content]="content" swipeEnabled="false">
  <ion-header no-border>
    <ion-toolbar color="myColor">
      <ion-title color="grey">Navigation</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="sidemenu">
    <ion-list>
      <button color="myColor" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

myColor should be defined as color variable inside the themes/variables.scss file, added to the colors array.

4 Likes
4

just add these lines inside your variables.scss;

ion-content {
–ion-background-color: var(–ion-color-light); //this is your color just change it to whatever
}