How to use Custom Palettes with Angular Material Framework

Question

I am facing a little problems with using Custom Palettes with Angular Material Framework. I still not understand myself to use custom theme.

In angular config file.

$mdThemingProvider.definePalette('crmPalette', {
    '50': 'fafafa',
    '100': 'ffcdd2',
    '200': '000000',
    '300': 'e57373',
    '400': 'ef5350',
    '500': 'f44336',
    '600': 'e53935',
    '700': 'd32f2f',
    '800': 'c62828',
    '900': 'b71c1c',
    'A100': 'ff8a80',
    'A200': 'ff5252',
    'A400': 'ff1744',
    'A700': 'd50000',
    'contrastDefaultColor': 'light',
    'contrastDarkColors': ['50', '100', '200'],
    'contrastLightColors': undefined
});

$mdThemingProvider.theme('crmPaletteTheme')
    .primaryPalette('crmPalette');

In a View file

<div md-theme="crmPaletteTheme">
    <md-button class="md-raised">Login</md-button>
</div>

I have questions to ask

After define a custom theme, how to use 'fafafa' and 'ffcdd2' that to assign background color and color to a md-button.

Answer 1

try this.

angular.module('App', ['ngMaterial']).config(
function ($mdThemingProvider) {

    $mdThemingProvider.definePalette('colormaterial', {
        '50': '14f9fc',
        '100': '1949a8',
        '200': 'ef9a9a',
        '300': 'e57373',
        '400': 'ef5350',
        '500': 'f44336',
        '600': 'e53935',
        '700': 'd32f2f',
        '800': 'c62828',
        '900': 'b71c1c',
        'A100': 'ff8a80',
        'A200': 'ff5252',
        'A400': 'ff1744',
        'A700': 'd50000',
    });
    $mdThemingProvider.theme('default')
      .primaryPalette('colormaterial')
}).controller('appController', function ($scope) {

});

in the html

       <md-input-container class="sin-margin ancho-total-element">
           <md-button md-colors="{'background-color': 'colormaterial-100'}" class="md-raised md-primary" type="submit"> Inicie Sesión </md-button>
       </md-input-container>

I tried it and it works