角度材质集调色板

Question

我正在尝试建立一个与材料设计相结合的角度项目。我的package.json的一部分看起来像这样：

 "dependencies": {
    "@angular2-material/button": "2.0.0-alpha.3",
    "@angular2-material/card": "2.0.0-alpha.3",
    "@angular2-material/checkbox": "2.0.0-alpha.3",
    "@angular2-material/core": "2.0.0-alpha.3",
    "@angular2-material/input": "2.0.0-alpha.3",
    "@angular2-material/list": "2.0.0-alpha.3",
    "@angular2-material/progress-bar": "2.0.0-alpha.3",
    "@angular2-material/progress-circle": "2.0.0-alpha.3",
    "@angular2-material/radio": "2.0.0-alpha.3",
    "@angular2-material/sidenav": "2.0.0-alpha.3",
    "@angular2-material/toolbar": "2.0.0-alpha.3",
    "angular2": "2.0.0-beta.16",
    "core-js": "^2.2.2",
    "normalize.css": "^4.1.1",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "~0.6.12"
  },

在AngularJS 1中，您可以通过mdThemingProvider将调色板设置为应用程序：

 angular.module('myApp', ['ngMaterial']).config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');
});

现在我想对Angular做同样的事情，但是不知道怎么做。我是否需要通过提供程序设置调色板(然后可以使用哪个提供程序，以及如何配置它？)或者我是否需要在我的核心scss文件中包含来自angular material模块的scss文件并设置一些属性？

Answer 1

不幸的是，由于Angular 2现在仍然是alpha版本，改变调色板的唯一方法是直接修改 并创建一个新的npm包。

根据一个角度成员：

@samio80样式目前在编写时考虑到了主题，但我们还没有准备好主题的部署策略。作为一种解决办法，您可以直接提取源代码，并通过修改_default-heme.scss和创建npm包(通过脚本stage-release.sh ase.sh)来自定义主题。

来源：https://github.com/angular/material2/issues/287

Answer 2

Angular Material 2现在已经更新为alpha 9，并带来了对主题的支持。Theming Documentation解释了如何将自己的自定义主题完整地实现到应用程序中。

以下是文档sass文件的内容。您可以决定不使用提供的材料颜色，而使用您自己的颜色。

 @import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include md-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: md-palette($md-indigo);
$accent:  md-palette($md-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$warn:    md-palette($md-red);

// Create the theme object (a Sass map containing all of the palettes).
$theme: md-light-theme($primary, $accent, $warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);

应该注意的是，虽然主题化支持是可用的，但它还没有最终确定，并且文档指出，随着时间的推移，他们计划使这一点变得更容易。然而，当前的状态运行得相当好。

Answer 3

至于使用预定义的材料配色方案，您可以始终遵循主题指南available here。

如果您想定义自己的公司配色方案，只需预先定义一个自定义调色板，并将其传递给mat-palette()函数：

...    
$mat-custom: (
            50: #e0f2f1,
            100: #b2dfdb,
            200: #80cbc4,
            300: #4db6ac,
            400: #26a69a,
            500: #009688,
            600: #00897b,
            700: #00796b,
            800: #00695c,
            900: #004d40,
            A100: #a7ffeb,
            A200: #64ffda,
            A400: #1de9b6,
            A700: #00bfa5,
            contrast: (
                    50: $black-87-opacity,
                    100: $black-87-opacity,
                    200: $black-87-opacity,
                    300: $black-87-opacity,
                    400: $black-87-opacity,
                    500: white,
                    600: white,
                    700: white,
                    800: $white-87-opacity,
                    900: $white-87-opacity,
                    A100: $black-87-opacity,
                    A200: $black-87-opacity,
                    A400: $black-87-opacity,
                    A700: $black-87-opacity,
            )
    );
    
    // Define the palettes for your theme using the Material Design palettes available in palette.scss
    // (imported above). For each palette, you can optionally specify a default, lighter, and darker
    // hue.
    $candy-app-primary: mat-palette($mat-custom);
    ...

调色板中使用的默认颜色阴影为500 (默认)、100 (较亮)和700 (较暗)。创建自定义配色方案的最简单方法是在from the standard palettes上复制调色板，并根据您的喜好对其进行调整。