Angularjs 如何在材质中创建多个主题？

我想应用蓝色，浅蓝色，绿色和华丽的阴影在我的应用程序。我使用的材料角主题部分。但不知道如何使用。我必须创建css？？或js或指令..

1。）首先通过

2.）从调色板中选择颜色（）

3.）使用您想要的颜色创建您自己的自定义主题，并在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.）然后你就可以使用这些主题了

<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>

我将是蓝色的（默认情况下）
我将是灰色的（定制）
我将是红色的（海关2）

如何为每个主题创建css类？？你能给我们展示一些例子吗？因此，我们可以更好地帮助您。我添加了相同的代码，但pallete的背景色仍然没有改变..：（背景（）有一些问题，它在最新版本中已修复。请尝试更新你的角度材质。我想使用白色作为主要颜色，我怎么可以？你应该按照回答中的步骤3，在定义调色板时使用不同的白色色调。）。