I want apply blue, light blue, green and ornage shade in my appication.I am using material angular theme part.But not getting exactly how to use..i have to create css ?? or js or directive..
To do so, open the Settings and navigate to Appearance & Behavior → Material Theme UI → Custom Theme. Once you're done customizing your colors, you'll need to select Custom Theme or Light Custom Theme from the Theme Switcher to see your colors in action. Enjoy!
it's very easy to create a custom angular material theme. This will allow you to specify primary, accent and warning colors that will be used on Angular Material components. Your custom theme will be a Sass file and in our case, we'll call it theme. scss and place it in our app's /src folder.
Angular Material supports customizing component styles via Sass API as described in the theming guide. This document provides guidance on defining custom CSS rules that directly style Angular Material components.
1.) First go through theme documentation here
2.) Pick colors from palette (link)
3.) Create yr own custom theme with colors you want and define it 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, 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.) Then on yr html u can just use these theme
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With