Adding intention group in angular material

Question

With regards to theming in angular material there are default intention groups, namely primary, accent, and warn. And I know that you can modify the colours and theme it using different palettes. But I want to create another intention group, for example success, so that I can use an md-success class on md-button to make it green. How would I go about doing this?

Answer 1

Although I see your point in wanting to have a custom intention group (so would I) I believe currently you will have to create a new "success" theme and configure its primary palette to use your desired colors.

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
   $mdThemingProvider.definePalette('mySucessPalette', {
     '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('success')
      .primaryPalette('mySucessPalette')
});

then you can use md-theme="success" wherever is appropriate.