Estou construindo um aplicativo, mas quero manter um esquema de cores consistente que possa ser alterado com as configurações, para que eu esteja usando Material (2) com angular (2+), mas não sei como obter o esquema de cores em elementos que não são diretamente oferecem a capacidade de colori-los comcolor="primary" por isso estou tentando descobrir como obter o esquema de cores / cores que meu tema do Material 2 usa. E eu quero que ele mude quando o tema mudar, por exemplo, minha barra de navegação se adaptará à mudança do tema porque está definida como

<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">

Mas um elemento de grade do Material 2 não usa o mesmo argumento, então eu tenho que tentar estilizá-lo em uma cor suficientemente próxima ou simplesmente não corresponder a ele (e ele não se ajustará às alterações de tema), como visto aqui:

Quero que ele combine a cor com o tapete do tema, que está aqui (e é alterado nas opções selecionadas nas configurações da barra de navegação)

@import '~@angular/material/theming';

@include mat-core();



$candy-app-primary: mat-palette($mat-red);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
.default {
  @include angular-material-theme($candy-app-theme);
}
.light {
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include angular-material-theme($light-theme);
}
@include angular-material-theme($candy-app-theme);