Add new colors along with custom theme colors angular2 material

Question

how to add new colors in Angular 2 material.

Its specified in the ng2-material docs: color: "primary"|"accent"|"warn" are accepted i want to add something like "progressbarcolor" other than the colors defined in my custom theme for angular2 material.

For eg :

 <md-progress-bar color="progressbarcolor">    </md-progress-bar>

Answer 1

You have two options:

1. Custom theme

   • recommended
   • create your own custom theme with custom colors with this guide

2. Override the style

   • possible, not recommended but sometimes used for example when placing white loader inside a colored button.

     <md-progress-bar class="custom-color"></md-progress-bar>

     /deep/ md-progress-circle.custom-color path { stroke: $progress-circle-custom-color; }

     • the /deep/ keyword ignores the shadow DOM so be careful using it, it is also deprecated but not yet removed
     • you can place the code in your global style file and therefore not use the deep keyword

Answer 2

Angular Material ships with the Material Design Spec's color palettes built in. In the event that you need to define a custom color palette, you can use $mdThemingProvider to define it, thereby making it available to your theme for use in its intention groups. Note that you must specify all hues in the definition map.

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

  $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('default')
    .primaryPalette('amazingPaletteName')

});