Цвета угловых материалов не меняются при использовании пользовательских тем

Question

Я хочу изменить цвета для " warn ", " accent " и " primary ".Однако я могу изменить только « primary » с моим кодом, в то время как « warn » и « accent » не меняются.

My theme.scss :

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

$my-app-primary: mat-palette($mat-green);
$my-app-accent: mat-palette($mat-grey);
$my-app-warn: mat-palette($mat-cyan);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

.alt-theme {
  @include angular-material-theme($my-app-theme);
}

My progress-bar -terminate-example.html :

<mat-progress-bar class="alt-theme" mode="determinate" value="40" color="primary"></mat-progress-bar>

My angular-cli.json :

{
  "apps": [{
    "styles": [
      "styles.css",
      "theme.scss"
      ]
  }]
}

Если я установлю color = "primary", он станет зеленым, как и предполагалось в theme.scss, но если я изменю его на "warn" или "акцент "не превратится в голубой и серый в моем случае.Он останется красным и желтым по умолчанию для материала.

Моя задача - изменить цвета индикатора выполнения в определенном компоненте, а не на всем сайте.

Можете ли вы помочь мне понять, кто яделаете неправильно?

Демонстрационная версия этого кода здесь .

Answer 1

Глядя на ваши определения тем, они кажутся почти правильными.Для разъяснения и лучшего расположения вашего кода, вы должны определить похожую на эту запись ЗДЕСЬ .

Это должно помочь решить вашу проблему.