Side Menu background color\ Change the background color of the side menu in an Ionic app can be a bit challenge some times.\ For this reason we are going to explore and see here how to overcome this situations at all.

The side menu is located in the app.component.html file, so if we do take a look into the relatives files we can find the app.component.scss which has the css style class.\ \ In this file we find the ion-menu and ion-content class declarations which is the one we are make the changes for example:

ion-menu ion-content {
  --background: linear-gradient(#ff0000, #0000ff);
}

If you apply the style above you will have something like this as result:

The important here is to understand how to reach out the background and how to apply style to it. Please, feel free to choose the colors you really want to apply.

Right now as we can see in the picture there are a white box that has the content of the menu buttons and staffs. The main white box that we have here is the ion-list component, to change it and apply some styles we need to override the ion-list on scss file like this:

ion-list {
  background: transparent;
}

Actually we changed the background of the ion-list, so it became transparent. Applying the styles above the result will be something like this:

This colors may be a tiny aggressive for a relaxing Yoga app, so don’t forget to choose a best color for your layout.

After this changes also remains a border on the list items.

Let’s remove this border bellow. We need to apply border none in the class ion-menu.md ion-list#inbox-list:

ion-menu.md ion-list#inbox-list {
  border-bottom: none !important;
}

The result without a bottom line will be better than before. Let’s keep improving our side menu.\ We now still have to modify the ion-item elements. For this let’s apply the following style in the ion-item class:

ion-item {
  margin: 1px;
  background: #FFF;
  border: 0.1px solid #FFF;
  --background: linear-gradient(rgba(255, 0, 0, 0.4), rgba(0, 0, 255, 0.4), rgba(255, 0, 0, 0.4));
}

 It seems me like a neon color in the ion-items as we can see.

Not bad, but the text are not completely readable. To finish we can apply a light color on it all and change the opacity for the ion-list to turn it visible for everyone looking by a distance.

You can find all the changes made in the code bellow:

ion-menu ion-content {
  --background: linear-gradient(#ff0000, #0000ff);
}

ion-list {  
  background: transparent;
}

ion-menu.md ion-list#inbox-list {
  border-bottom: none !important;
}

ion-item {
  margin: 1px;
  color: #FFF;
  background: #FFF;
  border: 0.1px solid #FFF;
  --background: linear-gradient(rgba(255, 0, 0, 0.4), rgba(0, 0, 255, 0.4), rgba(255, 0, 0, 0.4));
}

ion-menu.md ion-item ion-icon {
  color: #FFF !important;
}

ion-note {
  color: #FFF !important;
}

The final menu background css styles all together:

Hope it can helps you. Please, let your comment and follow us.