Trying to add more flexibility to elements css in angular-material

mdStyleColor.js

(function () {
  "use strict";

  var _theme;
  var _palettes;

  angular
    .module('mdColors',['mdColors'])

    .config(['$mdThemingProvider', function($mdThemingProvider){
      // Some costume palette from the docs
      $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'
      });
      // use the costume palette
      $mdThemingProvider.theme('default')
      .primaryPalette('amazingPaletteName')
      
      // what you really need
      _theme = $mdThemingProvider.theme();
      _palettes = $mdThemingProvider._PALETTES;
    }])

    .directive('mdStyleColor',
      function ($mdColorPalette) {
        return {
          restrict: 'A',
          scope: { mdStyleColor: '=' },
          link: function (scope, element, attrs) {
            for (var p in scope.mdStyleColor) {
              if (scope.mdStyleColor.hasOwnProperty(p)) {

                var themeColors = _theme.colors;

                var split = (scope.mdStyleColor[p] || '').split('.');
                if (split.length < 2) split.unshift('primary');

                var hueR   = split[1] || 'hue-1';    // 'hue-1'
                var colorR = split[0] || 'primary';  // 'warn'

                // Absolute color: 'orange'
                var colorA = themeColors[colorR] ?
                  themeColors[colorR].name : colorR;

                // Absolute Hue: '500'
                var hueA =
                  themeColors[colorR] ?
                  themeColors[colorR].hues[hueR] || hueR :
                  hueR;

                var colorValue = _palettes[colorA][hueA] ?
                  _palettes[colorA][hueA].value :
                  _palettes[colorA]['500'].value;

                element.css(p, 'rgb('+colorValue.join(',')+')');

              }
            }
          }
        }
      });
}());

How to use this is html?

got it

Thanks a lot. The script works great. But it does not pick up my accent color when it is custom defined like this:-

.config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('green')
.accentPalette('lime')
.warnPalette('red')
.backgroundPalette('grey');
})

@AshniL move your $mdThemingProvider.theme('default') config code into his mdColors module! Define all your colors there.