Семантические цвета в компоненте Angular Material

Приложение My Angular Material v18 позволяет пользователю устанавливать свою тему, но одна группа компонентов, «контроль заказа», имеет два семантических цвета: синий для «купить»; и красный для «продажи» (аналогично синему для «холодно» и красному для «жарко» в приложении погоды), которые не зависят от темы. Вот HTML-версия, которая делает то, что должна, за которой следует раздел Angular Material, который не меняет цвет.

Как я могу заставить элемент управления заказом Angular Material менять семантические цвета при выборе КУПИТЬ/ПРОДАТЬ, аналогично версии HTML?

Вот HTML-версия:

<div class = "order-control">
  <div>
    <span [class] = "buyColor()" (click) = "isSell=false">BUY</span>
    <span [class] = "sellColor()" (click) = "isSell=true">SELL</span>
  </div>
  <div>
    <label for = "units">Units</label>
    <input
      [class] = "getColor()"
      type = "range"
      id = "units"
      name = "units"
      [min] = "unitsMin"
      [max] = "unitsMax"
      [(ngModel)] = "units"/>
  </div>
  <div>
    <label for = "price">Price</label>
    <input
      [class] = "getColor()"
      type = "range"
      id = "price"
      name = "price"
      [min] = "priceMin"
      [max] = "priceMax"
      [(ngModel)] = "price"/>
  </div>
  <div>
    <button [class] = "getColor()" type = "button">Submit order</button>
  </div>
</div>

А вот аналогичная версия с Angular Material, но цвета переключателя, ползунков и кнопки отправки должны меняться при выборе «стороны» ордера (т. е. покупки или продажи):

<div class = "order-control">
  <div>
    <mat-button-toggle-group name = "side" [(ngModel)] = "isSell">
      <mat-button-toggle [value] = "false">BUY</mat-button-toggle>
      <mat-button-toggle [value] = "true">SELL</mat-button-toggle>
    </mat-button-toggle-group>
  </div>
  <div>
    <label for = "units">Units</label>
    <mat-slider
      [max] = "unitsMax"
      [min] = "unitsMin"
      [step] = "unitsStep"
      discrete showTickMarks>
      <input matSliderThumb [(ngModel)] = "units" #unitsSlider />
    </mat-slider>
  </div>
  <div>
    <label for = "price">Price</label>
    <mat-slider
      [max] = "priceMax"
      [min] = "priceMin"
      [step] = "priceStep"
      discrete showTickMarks>
      <input matSliderThumb [(ngModel)] = "price" #priceSlider />
    </mat-slider>
  </div>
  <div>
    <button mat-flat-button>Submit Order</button>
  </div>
</div>

CSS

.order-control {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .sell {
    color: red;
    accent-color: red;
  }

  .buy {
    color: blue;
    accent-color: blue;
  }
}

Машинопись

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ FormsModule, MatButtonModule, MatButtonToggleModule, MatSliderModule ],
  templateUrl: './main.html',
  styleUrl: './main.css',
})
export class App {
  isSell: boolean = false;

  units = 1;
  unitsMin = 1;
  unitsMax = 10;
  unitsStep = 1;

  price = 500;
  priceMin = 0;
  priceMax = 1000;
  priceStep = 25;

  buyColor() {
    return this.isSell ? '' : 'buy';
  }

  sellColor() {
    return this.isSell ? 'sell' : '';
  }

  getColor() {
    return this.isSell ? 'sell' : 'buy';
  }
}

Вот рабочий образец.