更改原色答案

【问题标题】：Change the Primary Color更改原色
【发布时间】：2019-09-08 02:27:19
【问题描述】：

我创建了一个简单的主题，但我想更改主要颜色和次要颜色。

主题.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'
  ]

【问题讨论】：

标签： angular-material

【解决方案1】：

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

【讨论】：