title: Changing Side Menu background and header color in Ionic2
body: <p>I am very new to Ionic 2 and I am unable to change my side menu background color and also the menu-header color of my app. Any help appreciated! Below is the code snippet and the desired result(image). I have numbered the requirements for convenience. Also, it would be very helpful if someone can help with the implementation of drop down option(requirement no. 3). Basically it would contain some sub-list items. Thanks in advance!</p>
  
  <pre><code>&lt;ion-menu [content]="content"&gt;
    &lt;ion-header no-border&gt;
      &lt;ion-toolbar color = "white"&gt;
  
  
              &lt;ion-title class="titletext" style="display:inline-block" &gt; 
                 &lt;div style = "width : 100%; height : 100%; background-color : white"&gt;
                    &lt;div style = "float:left;width:75%"&gt;
                      &lt;h3&gt;MY APP &lt;/h3&gt;
                    &lt;/div&gt;
                    &lt;div style = "float:right;width:25%"&gt;
                     &lt;img src = "assets/icon/reports.PNG" /&gt;
                 &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/ion-title&gt;
              &lt;!--&lt;img  src="assets/icon/Wemart_Icon.png" alt="logo"  height="40px" width = "40px" &gt;  --&gt;
  
      &lt;/ion-toolbar&gt;
    &lt;/ion-header&gt;
  
   &lt;ion-content&gt;
     &lt;div style = "color : #3DBCC0; width:100%; height : 100%"&gt;
      &lt;ion-list&gt;
  
        &lt;!--&lt;button menuClose ion-item *ngFor="let p of myPages" (click)="openPage(p)"&gt;
          &lt;span text-color="my-custom-color2"&gt;{{p.title}}&lt;/span&gt;
        &lt;/button&gt;--&gt;
  
         &lt;button ion-item&gt;
            &lt;ion-icon name="home" item-left&gt;&lt;/ion-icon&gt; HOME
         &lt;/button&gt;
  
         &lt;button ion-item&gt;
            &lt;ion-icon name="home" item-left&gt;&lt;/ion-icon&gt; PORTFOLIO ANALYTICS
         &lt;/button&gt;
  
         &lt;button ion-item&gt;
            &lt;ion-icon name="home" item-left&gt;&lt;/ion-icon&gt; EXPENSES
         &lt;/button&gt;
  
         &lt;button ion-item&gt;
            &lt;ion-icon name="home" item-left&gt;&lt;/ion-icon&gt; UTILITY ANALYTICS
         &lt;/button&gt;
  
         &lt;button ion-item&gt;
            &lt;ion-icon name="home" item-left&gt;&lt;/ion-icon&gt; TERMS OF USE
         &lt;/button&gt;
  
         &lt;button ion-item&gt;
            &lt;ion-icon name="home" item-left&gt;&lt;/ion-icon&gt; SIGN OUT
         &lt;/button&gt;
  
      &lt;/ion-list&gt;
    &lt;/div&gt;
    &lt;/ion-content&gt;
  
  &lt;/ion-menu&gt;
  
  &lt;!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --&gt;
  &lt;ion-nav [root]="rootPage" #content swipeBackEnabled="false"&gt;&lt;/ion-nav&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/aaj7B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aaj7B.png" alt="enter image description here"></a></p>
  
  <p>I am adding variables.scss code below:</p>
  
  <pre><code>// Ionic Variables and Theming. For more info, please see:
  // http://ionicframework.com/docs/v2/theming/
  $font-path: "../assets/fonts";
  
  @import "ionic.globals";
  
  
  // Shared Variables
  // --------------------------------------------------
  // To customize the look and feel of this app, you can override
  // the Sass variables found in Ionic's source scss files.
  // To view all the 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 it easy to reuse colors on various components.
  // It's highly recommended to change the default colors
  // to match your app's branding. Ionic uses a Sass map of
  // colors so you can add, rename and remove colors as needed.
  // The "primary" color is the only required color in the map.
  
  $colors: (
    primary:    #387ef5,
    secondary:  #32db64,
    danger:     #f53d3d,
    light:      #f4f4f4,
    dark:       #222,
    color1 : #8FAADC,
    color2 : #DAE3F3,
    color3: #3DBCC0
  );
  
  // App iOS Variables
  // --------------------------------------------------
  // iOS only Sass variables can go here
  
  
  
  
  // App Material Design Variables
  // --------------------------------------------------
  // Material Design only Sass variables can go here
  
  
  
  
  // App Windows Variables
  // --------------------------------------------------
  // Windows only Sass variables can go here
  
  
  
  
  // App Theme
  // --------------------------------------------------
  // Ionic apps can have different themes applied, which can
  // then be future customized. This import comes last
  // so that the above variables are used and Ionic's
  // default are overridden.
  
  @import "ionic.theme.default";
  
  
  // Ionicons
  // --------------------------------------------------
  // The premium icon font for Ionic. For more info, please see:
  // http://ionicframework.com/docs/v2/ionicons/
  
  @import "ionic.ionicons";
  
  
  // Fonts
  // --------------------------------------------------
  
  @import "roboto";
  @import "noto-sans";
  </code></pre>