i want apply blue, light blue, green , ornage shade in appication.i using material angular theme part.but not getting how use..i have create css ?? or js or directive..
1.) first go through theme documentation here
2.) pick colors palette (link)
3.) create yr own custom theme colors want , define 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, default, text (contrast) // on palette should dark or light 'contrastdarkcolors': ['50', '100', //hues contrast should 'dark' default '200', '300', '400', 'a100'], 'contrastlightcolors': undefined // specify if default 'dark' }); $mdthemingprovider.theme('custom2') .primarypalette('amazingpalettename') } 4.) on yr html u can use these theme
<div> <md-button class="md-primary">i blue (by default)</md-button> <div md-theme="custom"> <md-button class="md-primary">i grey(custom)</md-button> </div> <div md-theme="custom2"> <md-button class="md-primary">i red(custom2)</md-button> </div> </div> 
Comments
Post a Comment