Изменить основной цвет

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

Я использовал код из этого поста , который работал.Затем я изменил его так, чтобы он использовал мои цвета следующим образом:

$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 в качестве опции экспорта.