How to create multiple theme in material angular?

1.) First go through theme documentation here

2.) Pick colors from palette (link)

3.) Create yr own custom theme with colors you want and define it inside app.config.

app.config(function($mdThemingProvider) {

    $mdThemingProvider.theme('default')
          .primaryPalette('blue')
          .accentPalette('indigo')
          .warnPalette('red')
          .backgroundPalette('grey');

    $mdThemingProvider.theme('custom')
          .primaryPalette('grey')
          .accentPalette('deep-purple')
          .warnPalette('green')

    //create yr own palette 
    $mdThemingProvider.definePalette('amazingPaletteName', {
        '50': 'ffebee',
        '100': 'ffcdd2',
        '200': 'ef9a9a',
        '300': 'e57373',
        '400': 'ef5350',
        '500': 'f44336',
        '600': 'e53935',
        '700': 'd32f2f',
        '800': 'c62828',
        '900': 'b71c1c',
        'A100': 'ff8a80',
        'A200': 'ff5252',
        'A400': 'ff1744',
        'A700': 'd50000',
        'contrastDefaultColor': 'light',    // whether, by default, text         (contrast)
                                    // on this palette should be dark or light
        'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
         '200', '300', '400', 'A100'],
        'contrastLightColors': undefined    // could also specify this if default was 'dark'
    });

   $mdThemingProvider.theme('custom2')
        .primaryPalette('amazingPaletteName')

}

4.) Then on yr html u can just use these theme

<div>
   <md-button class="md-primary">I will be blue (by default)</md-button>
   <div md-theme="custom">
      <md-button class="md-primary">I will be grey(custom)</md-button>
   </div>
   <div md-theme="custom2">
      <md-button class="md-primary">I will be red(custom2)</md-button>
   </div>
</div>