Угловая тема с более чем 3 цветами

Question

Я хочу создать угловую тему с более чем тремя цветами (основной, акцент, предупреждение) и применить эти цвета к элементам материала, таким как индикаторы выполнения и т. Д.

Я читал этот кейс для Материалов: https://material.io/design/material-studies/rally.html#color

Где они используют палитру из 6 цветов:

Чтобы добавить дополнительные цвета, я представляю, что это будет правильный путь?

$mat-extra-color-orange: (
 50  : #fff8e5,
 100 : #ffebb0,
 200 : #ffdc78,
 ...
}

Но что если я захочу использовать этот дополнительный цвет, скажем, в mat-progress-bar, который принимает только primary/accent/warn?

Спасибо за вашу помощь!

Answer 1

До Angular Material 6.x (я не знаю, что может измениться 7.x и т. Д.), Только три основные / акцентные / предупреждающие палитры доступны в теме. Это очень ограничивает, но есть одна вещь, которую вы можете сделать, чтобы мог бы быть полезным иногда - определить более одной темы.

Дополнительные темы дают вам дополнительные основные, акцентирующие и предупреждающие палитры. Затем вы можете применять разные темы к разным компонентам в зависимости от того, какой основной, акцентный и предупреждающий цвета вы хотите иметь для каждого компонента. (Вам может понадобиться заглянуть в исходный код Angular Material, чтобы понять, как это сделать, но это не так сложно - просто посмотрите, что делает angular-material-theme mixin .)

Очевидно, что этот не * дает 1011 * больше вариантов цвета для каждого компонента, но позволяет использовать больше цветов в приложении и использовать альтернативные цвета для выбранных компонентов. Это как бы против идеи создания тематики в Material Design, поэтому используйте осторожно.

Например:

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

$main-theme: mat-light-theme($mat-purple, $mat-yellow, $mat-red);
$alternate-theme: mat-light-theme($mat-deep-purple, $mat-amber, $mat-red);

@include mat-core-theme($main-theme);
@include mat-autocomplete-theme($main-theme);
@include mat-badge-theme($alternate-theme);
...