Question

我正在尝试结合材料设计设置Angular项目。我的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文件中包含角度材质模块的scss文件并设置一些属性？

Answer 1

不幸的是，由于Angular 2现在仍处于alpha状态，更改调色板的唯一方法是直接修改_default-theme.scss并创建一个新的npm包。

Angular成员说：

@ samio80这些风格目前都是以主题为主题写的，但是我们没有准备就绪的部署策略。作为一个同时解决方法，您可以直接拉动源通过修改_default-theme.scss并创建npm来自定义主题包（通过脚本stage-release.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);
    ...

调色板中使用的Deafult色调为500（默认），100（较浅）和700（较暗）。创建自定义配色方案的最简单方法是复制from the standard palettes上的调色板并根据您的喜好进行调整。

角度材质 - 设置调色板

3 个答案: