Как да създадете множество теми в material angular?

Искам да приложа син, светло син, зелен и оранжев нюанс в моето приложение. Използвам материална ъглова част от темата. Но не разбирам точно как да използвам.. трябва да създам css?? или js или директива..


person shweta saraph    schedule 08.05.2015    source източник
comment
Как да създадете css клас за всяка тема??   -  person shweta saraph    schedule 08.05.2015
comment
Можете ли да ни покажете някакъв пример? Така че можем да ви помогнем по-добре.   -  person Danish Jamil    schedule 08.05.2015


Отговори (1)


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.) След това на година html можете просто да използвате тези теми

<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>
person nitin    schedule 11.05.2015
comment
Добавих същия код, но цветът на фона на палетата все още не е променен.. :( - person shweta saraph; 12.05.2015
comment
имаше проблем с фона (github.com/angular/material/issues/1450 ), той е коригиран в най-новата версия. Опитайте да актуализирате yr angular-material. - person nitin; 12.05.2015
comment
искам да използвам бял цвят като основен, как мога? - person Jason Brody; 23.06.2016
comment
Трябва да следвате стъпка 3 от отговора и да използвате различни нюанси на бялото, докато определяте вашата палитра. - person nitin; 23.06.2016