Angular Mat-Toggle with changed background

Question

I have Mat-Toggle buttons used in the legacy mode. I change the background color for the focus mode. This works fine.

But when I change the selection via keyboard back to the initially focused button the background color of the scss files is not any longer applied. ( .mat-button-toggle-checked.cdk-focused )

How to set the background properly?

Sample code provided in Stackblitz

Answer 1

When clicked with the mouse:


When tabbed with the keyboard (Now shows with background-color as expected):

Please find my solution on the stackblitz

button-toggle-exclusive-example.scss

.example-selected-value {
  margin: 15px 0;
}

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

@include mat-core();

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

$config: mat-typography-config();
@mixin mix-app-theme($app-theme) {
  .mat-button-toggle-checked {
    background-color: mat-color($app-purple, 400);
     @extend .text-color;
  }
  .mat-button-toggle-checked.cdk-focused { 
  background-color: mat-color($app-purple, 600);
    @extend .text-color;
  }
  .mat-button-toggle-checked.mat-button-toggle-disabled {
    background-color: mat-color($app-purple, 200);
    color: mat-color($app-purple, default-contrast);
  }
}

.text-color {
  * {
    color: rgb(255, 255, 255);
  }

  color: rgba(255, 255, 255, 0.25);
}

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

I've amended your code slightly to include a new class to change the color of the button when it's in a cdk-focused state.

I've included the * selector has an override to mitigate changing the background color. There seems to be a bug with the mat-button-toggle when trying to change the cdk-focus color.

I'll try to dig further to see why this is happening.

I hope this helps.

Answer 2

There is apparently an element causing this with class mat-button-toggle-focus-overlay .

This element is inside each toggle button and produces an overlay of background white to appear in front of your background.

You can set this class opacity to 0 !important , but then the visual focus when switching buttons with keyboard will fail.

You could set it to 0 !important programmatically when the related button is (click) and then remove it when another button is (click) .