Changing Side Menu background and header color in Ionic2 -

i new ionic 2 , unable change side menu background color , menu-header color of app. appreciated! below code snippet , desired result(image). have numbered requirements convenience. also, helpful if can implementation of drop down option(requirement no. 3). contain sub-list items. in advance!

<ion-menu [content]="content">   <ion-header no-border>     <ion-toolbar color = "white">               <ion-title class="titletext" style="display:inline-block" >                 <div style = "width : 100%; height : 100%; background-color : white">                   <div style = "float:left;width:75%">                     <h3>my app </h3>                   </div>                   <div style = "float:right;width:25%">                    <img src = "assets/icon/reports.png" />                </div>                </div>             </ion-title>             <!--<img  src="assets/icon/wemart_icon.png" alt="logo"  height="40px" width = "40px" >  -->      </ion-toolbar>   </ion-header>   <ion-content>    <div style = "color : #3dbcc0; width:100%; height : 100%">     <ion-list>        <!--<button menuclose ion-item *ngfor="let p of mypages" (click)="openpage(p)">         <span text-color="my-custom-color2">{{p.title}}</span>       </button>-->         <button ion-item>           <ion-icon name="home" item-left></ion-icon> home        </button>         <button ion-item>           <ion-icon name="home" item-left></ion-icon> portfolio analytics        </button>         <button ion-item>           <ion-icon name="home" item-left></ion-icon> expenses        </button>         <button ion-item>           <ion-icon name="home" item-left></ion-icon> utility analytics        </button>         <button ion-item>           <ion-icon name="home" item-left></ion-icon> terms of use        </button>         <button ion-item>           <ion-icon name="home" item-left></ion-icon> sign out        </button>      </ion-list>   </div>   </ion-content>  </ion-menu>  <!-- disable swipe-to-go-back because it's poor ux combine stgb side menus --> <ion-nav [root]="rootpage" #content swipebackenabled="false"></ion-nav> 

i adding variables.scss code below:

// ionic variables , theming. more info, please see: // http://ionicframework.com/docs/v2/theming/ $font-path: "../assets/fonts";  @import "ionic.globals";   // shared variables // -------------------------------------------------- // customize , feel of app, can override // sass variables found in ionic's source scss files. // view possible ionic variables, see: // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/  $toolbar-background: white; $toolbar-wp-title-text-align : left;  // named color variables // -------------------------------------------------- // named colors makes easy reuse colors on various components. // it's highly recommended change default colors // match app's branding. ionic uses sass map of // colors can add, rename , remove colors needed. // "primary" color required color in map.  $colors: (   primary:    #387ef5,   secondary:  #32db64,   danger:     #f53d3d,   light:      #f4f4f4,   dark:       #222,   color1 : #8faadc,   color2 : #dae3f3,   color3: #3dbcc0 );  // app ios variables // -------------------------------------------------- // ios sass variables can go here     // app material design variables // -------------------------------------------------- // material design sass variables can go here     // app windows variables // -------------------------------------------------- // windows sass variables can go here     // app theme // -------------------------------------------------- // ionic apps can have different themes applied, can // future customized. import comes last // above variables used , ionic's // default overridden.  @import "ionic.theme.default";   // ionicons // -------------------------------------------------- // premium icon font ionic. more info, please see: // http://ionicframework.com/docs/v2/ionicons/  @import "ionic.ionicons";   // fonts // --------------------------------------------------  @import "roboto"; @import "noto-sans"; 

in order give background color swidemenu have open app.css , copy paste below code. ion-menu has content block pages. have change background color of page( sidemenu )

ion-menu{  ion-content{   background-color:red !important;  } }