Add new colors along with custom theme colors angular2

Question

how to add new colors to Angular 2 material.

It is indicated in the docs of the ng2 material: color: "primary" | "accent" | "warn" is accepted. I want to add something like "progressbarcolor", except for the colors defined in my special theme for angular2 material,

For instance,

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

Answer 1

You have two options:

• Custom theme

  • Recommended
  • create your own custom color theme this guide

• Cancel style

  • it may not be recommended, but it is sometimes used, for example, when placing a white bootloader 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; }

    • /deep/ DOM , , , .
    • , , deep

Answer 2

Angular Material Design Spec. , , $mdThemingProvider , . , .

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')

});