mobile ecommerce development

Adding a custom Ionic color to the side menu

1. Open variable.scss to add your custom property

--ion-color-custom: #e0e4e7;
--ion-color-custom-rgb: 56, 128, 255;
--ion-color-custom-contrast: #ffffff;
--ion-color-custom-contrast-rgb: 255, 255, 255;
--ion-color-custom-shade: #3171e0;
--ion-color-custom-tint: #4c8dff;

2. Open the scss file on the page you which to apply the custom property

.my-custom {
--ion-background-color: var(--ion-color-custom); }
ion-menu{ ion-content{ --ion-background-color:--ion-color-custom } }

In this case, I what to change the backgroud-color of my Ionic Side Menu

3. Open the html page, and apply the class

ion-menu content class="my-custom">