Materyal açısal olarak çoklu tema nasıl oluşturulur?

Question

Uygulamamda mavi, açık mavi, yeşil ve süslü gölgeler uygulamak istiyorum. Malzeme açısal tema kısmını kullanıyorum.Ama tam olarak nasıl kullanılmayacağını .. css oluşturmalıyım ?? ya .. js veya direktif

Answer 1

1.) Öncelikle) theme documentation here

2. geçmesi paletten renkleri seçin (link)

3.) istediğiniz renkleri ile yr kendi özel temanızı oluşturun ve tanımlamak app.config içinde.

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.) Sonra yıl html u sadece bu tema

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