Использование пользовательской темы Material Design для контроля стандартных цветов компонентов

Question

У меня есть проект Angular 7 с Angular Material. Я использую одну из стандартных тем. Я пытаюсь контролировать индикатор выполнения, чтобы иметь возможность изменить его цвет с красного на зеленый в зависимости от его значения.

Единственный способ контролировать его цвет - это передать один из primary / accent / warn.

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

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

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

$candy-app-warn:    mat-palette($mat-red);

$candy-app-green:  mat-palette($mat-green); // MY CUSTOM NAMED THEME ATTRIBUTE
$candy-app-red:    mat-palette($mat-red);  // MY CUSTOM NAMED THEME ATTRIBUTE

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

// that you are using.
@include angular-material-theme($candy-app-theme);

и затем управление моим компонентом следующим образом:

<mat-progress-bar mode="determinate" value="40" color="green"></mat-progress-bar>

Я ценю, что индикатор выполнения, похоже, не поддерживает какие-либо другие псевдонимы цвета, поэтому не уверен, что смогу заставить этот подход работать> Любые идеи о том, как я мог бы достичь этого результата. я хочу изменить цвет индикатора выполнения, не нарушая работу остальной части моего приложения, которая опирается на существующую тему.

Answer 1

Создание пользовательских классов тем в файле темы

  .red {
    $red-theme-primary: mat-palette($mat-red);
    $red-theme-accent:  mat-palette($mat-yellow, 400);
    $red-theme: mat-light-theme($red-theme-primary, $red-theme-accent);

    @include angular-material-theme($red-theme);
   }

  .green {
    $green-theme-primary: mat-palette($mat-green);
    $green-theme-accent:  mat-palette($mat-yellow, 400);
    $green-theme: mat-light-theme($green-theme-primary, $green-theme-accent);

    @include angular-material-theme($green-theme);
  }

Оберните тег mat с примером div и добавьте класс темы с ngClass в качестве динамического параметра

  <div [ngClass]="progressColor">
   <!--wrap mat tag in div use class as defined in theme file -->
    <mat-progress-bar mode="determinate" value="progressValue" color="primary"></mat- 
    progress-bar>
  </div>

В файле ts изменить значения в условиях

  export class ProgressComponent implements OnInit {
     progressColor = "red";
     progressValue = 0;
     constructor() { }

    ngOnInit() {
      this.progressValue = this.getProgress(51);
    }
    getProgress(value: number): number {

      if (value <= 50) {
       this.progressColor = "red";
      }
      else {
       this.progressColor = "green";
      }
   return value;
  }
 }

пример получения подсказки об изменении цвета с помощью вторичных тем.

Вот один пример из предыдущего ответа также со второстепенной темой.

Как изменить цвет углового материала. Шаговые иконки

Answer 2

Вы можете иметь несколько тем материала, например:

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

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

    $candy-app-warn:    mat-palette($mat-red);

    $candy-app-green:  mat-palette($mat-green); // MY CUSTOM NAMED THEME ATTRIBUTE
    $candy-app-red:    mat-palette($mat-red);  // MY CUSTOM NAMED THEME ATTRIBUTE

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

    // that you are using.
    @include angular-material-theme($candy-app-theme);

    .my-second-theme {

     $second-theme-primary: mat-palette($mat-indigo);
     $second-theme-accent:  mat-palette($mat-pink, A200, A100, A400);

     $second-theme-warn:    mat-palette($mat-red);

     $second-theme: mat-light-theme($second-theme-primary, $second-theme-accent, $second-theme-warn);
     @include angular-material-theme($second-theme);
    }

Итак, все, что находится внутри элемента с классом my-second-theme, использует основной, акцент и предупреждение из второй темы, не затрагивая основное приложение.

Но если вы просто хотите настроить один конкретный цвет, вы должны переопределить классы CSS из вашего компонента, например:

.mat-progress-spinner {
    color: green
}

Чтобы получить имена классов, вам нужно отладить элементы в вашем браузере и сделать небольшую попытку и ошибку. Лучше иметь несколько тем с разными цветовыми комбинациями и использовать их во всем приложении.