更改原色

Question

我创建了一个简单的主题，但我想更改原色和副色。

theme.scss：

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

// #EB3D53
// #4980b3

$my-app-primary: mat-palette($mat-blue-grey); <-- this should be #4980b3
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);

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

尝试传递我的颜色会导致编译器错误。我试图用我的颜色创建自己的变量并将其传递给我，但这没有用。我对SASS非常陌生，所以不确定在这里做错了什么。

编辑：

我使用了一种工具来生成不起作用的代码：http://mcg.mbitson.com/#!?mcgpalette0=%234980b3

我使用了此post中的有效代码。然后，我将其修改为使用自己的颜色，如下所示：

$vender-portal-blue: (
50: #e9f0f6,
100: #c8d9e8,
200: #a4c0d9,
300: #80a6ca,
400: #6493be,
500: #4980b3,
600: #4278ac,
700: #396da3,
800: #31639a,
900: #21508b,
A100: #c8dfff,
A200: #95c1ff,
A400: #62a4ff,
A700: #4895ff,
contrast: (
  50: $dark-primary-text,
  100: $dark-primary-text,
  200: $dark-primary-text,
  300: $dark-primary-text,
  400: $dark-primary-text,
  500: $dark-primary-text,
  600: $dark-primary-text,
  700: $dark-primary-text,
  800: $dark-primary-text,
  900: $light-primary-text,
  A100: $dark-primary-text,
  A200: $dark-primary-text,
  A400: $dark-primary-text,
  A700: $dark-primary-text,
  )
);

我使用的工具生成了许多其他属性，这些属性导致编译器抱怨。我了解如果不兼容，为什么会产生额外的绒毛。看起来是这样的：

'contrastDefaultColor': 'light',
  'contrastDarkColors': [
    '50',
    '100',
    '200',
    '300',
    '400',
    'A100',
    'A200',
    'A400',
    'A700'
  ],
  'contrastLightColors': [
    '500',
    '600',
    '700',
    '800',
    '900'
  ]

Answer 1

问题是我需要选择Angular Js 2 Material 2作为导出选项。