How to set the color of the toggle buttons

Question

I have a group of toggle buttons. They are very bright and disappear in the background on poor monitors with a high level of brightness.

How can I style them correctly? I would prefer to give them an accent or primary colors, as you can do for regular buttons.

In this case, the colors of the main and accent colors are dark. Therefore, the text should turn white (with some transparency). For regular buttons, it works automatically.

<div class="output-size">
  <mat-button-toggle-group>
    <mat-button-toggle value="letter">Letter</mat-button-toggle>
    <mat-button-toggle value="legal">Legal</mat-button-toggle>
    <mat-button-toggle value="a4">A4</mat-button-toggle>
    <mat-button-toggle value="a5">A5</mat-button-toggle>
  </mat-button-toggle-group>
</div>

Answer 1

matButtonToggledoes not support property colorlike matButton.

You can use css classes .mat-button-toggleand .mat-button-toggle-checkedfor styling the various states.

- , , .

Stackblitz mat-button-toggle-group: Stackblitz   angular -t1k1x6

:

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

@include mat-core();

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

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

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

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

  .mat-button-toggle-checked {
    background-color: mat-color($accent);
    color: mat-color($accent, default-contrast);
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

: Angular

Answer 2

SASS, , . , <mat-button-toggle-group color="primary"> (, <mat-button-toggle color="primary">) .

, thumbs-up .