Угловой материал: использовать цвета из тем для фона

Question

Я хочу подать на угловой материал mat-button-toggle цвет фона, отличный от стандартного. В настоящее время у меня есть

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

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-primary-light:  mat-palette($mat-indigo, A200, A100, A400);
$app-purple: mat-palette($mat-pink, A200, A100, A400);

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

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $purple: map-get($app-theme, warn);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }
  .mat-button-toggle.purple {
    background-color: mat-color($purple, 700);
  }

Я нашел список доступных тем. Теперь я хотел бы подать заявку на mat-button-toggle цвет от Deep Purple. Почему-то $purple не работает, и я понятия не имею, как правильно извлечь цвета.

Каков правильный синтаксис для его извлечения из Deep Purple?

Answer 1

Я наконец понял, что мне нужно включить определенную тему в $app-theme - чем я могу ее использовать довольно легко:

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

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-purple: mat-palette($mat-deep-purple);

$app-theme: mat-light-theme($app-primary, $app-purple);

// https://material.io/archive/guidelines/style/color.html#color-color-palette

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }
  .mat-button-toggle.purple {
    background-color: mat-color($app-purple, 700);
  }

Answer 2

Ваш $purple вариант - это карта. Вы можете получить один цвет с помощью функции map-get:

.mat-button-toggle.purple {
    background-color: map-get($purple, 700);
}