添加新颜色以及自定义主题颜色 angular2 材质

Question

如何在 Angular 2 材质中添加新颜色。

它在 ng2-material 文档中指定：颜色："主要"|"重音"|"警告"被接受，我想添加类似"进度条颜色"的东西，而不是在我的自定义主题中为 Angular2 材料定义的颜色。

例如：

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

Answer 1

您有两个选择：

1. 自定义主题

   • 推荐
   • 使用本指南使用自定义颜色创建您自己的自定义主题

2. 覆盖样式

   • 可能，不推荐，但有时使用，例如在彩色按钮内放置白色加载器时。

     <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

附带了 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')
});