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