angular-material change checkbox color

Question

I\'m using checkbox of angular-material2. Currently the default color of checkbox is coming as purple color.
Looks like they have changed default color of checkbox from

Answer 1

.mat-checkbox-ripple .mat-ripple-element,.mat-checkbox-checked.mat-accent .mat-checkbox-background {
      background-color: $your-color!important;
}

.mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
      background-color: $your-color!important;
}

Answer 2

With beta.2 of Angular Material, the color attribute should work.

There were some issues with it before beta.2

See the commit that fixed that issue.

Answer 3

For Angular Material 7, works for outline color and inside filled in color

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
    opacity: 0.03 !important;
    background-color: #005691!important;
  }

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #005691;
  }

Answer 4

Since deep is deprecated. In my view the right way to do it is using encapsulation: ViewEncapsulation.None.

ex:

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
})

Then you just need to change the class

.mat-checkbox-background {
  background-color: green;
}

You just need to be careful to deal with global css stuff. In SASS nested classes should handle it properly.

You can have more details here: https://stackoverflow.com/a/54672579/783364

Answer 5

There are two methods(that i know ) to change the background color of mat-checkbox (angular 9)-

method 1 - by using color property of the mat-checkbox .

       <mat-checkbox
          id="{{ subtask.name }}"
          [color]="accent"
        >
          Check
        </mat-checkbox>

Limitation - You can only use color according to the angular material theme by this method .

method 2 - If you want to give custom colors to the mat-checkbox first track down the classes till the target class you want to change color of. tracking of nested classes

after that write like this in your style.css(global) file-

1st checkbox

.l0
  .mat-checkbox-checked
  .mat-checkbox-layout
  .mat-checkbox-inner-container
  .mat-checkbox-background {
  background-color: #ffbf00 !important;
}

2nd checkbox

.l1
  .mat-checkbox-checked
  .mat-checkbox-layout
  .mat-checkbox-inner-container
  .mat-checkbox-background {
  background-color: #4caf50 !important;
}

Result - different color for different mat-checkbox