使用angular2 material和theming...how添加不同的主色阴影

Question

我有一个叫做笨蛋主题.scss的主题文件，内容如下：

@import '~@angular/material/core/theming/all-theme';
@include mat-core();

/*https://material.io/guidelines/style/color.html#color-color-palette*/

$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-teal , 700, A100, A400);

$theme: mat-light-theme($primary, $accent);
@include angular-material-theme($theme);

所有工作都很好。

然而，我在下面定义了一个工具栏：

<md-toolbar color="primary"></md-toolbar>
<md-toolbar color="wowee"></md-toolbar>

我希望这个类wowee是一个不同的颜色，它是500，例如：

  $wowee: mat-palette($mat-indigo,100);


$mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: #3f51b5,   
  600: #3949ab,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: #8c9eff,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: white,
    400: white,
    500: $white-87-opacity,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: $white-87-opacity,
  )
);

Angular2是怎么说的?我该怎么做？

Answer 1

颜色属性只能是：'primary‘、'warn’或'accent‘。

您可以做的是为每个组件创建不同的主题...来自(Theming only certain components)的示例：

​

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

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();

// Define the theme.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the theme styles for only specified components.
@include mat-core-theme($candy-app-theme);
@include mat-button-theme($candy-app-theme);
@include mat-checkbox-theme($candy-app-theme);

​

另一件事是使用css (将css放在您的全局css文件中)：

​

.mat-toolbar.mat-primary {
    background: your color;
}

​