How to change mat-checkbox color in Angular material

mat-checkbox color

mat-checkbox uses default material theme colors.

By defualt checkboxes uses the material theme accent color, and we can change it to primary or warn using color property.

And in most of the real world projects we will give our own custom colors to the mat-checkbox and there is no direct way or property though which we can change the mat-checkbox color.

To change mat-checkbox color we need to override the default theme css colors.

Let’s go though an example

mat-checkbox color

Add a simple checkbox with the label checkbox color.

<mat-checkbox>checkbox color</matcheckbox>
mat-checkbox ouput html

mat-checkbox ouput html

And see the generated HTML for the above checkbox.

mat-checkbox will generate a span element with the class .mat-checkbox-background through which we can control the background color of checkbox.

Now all we have to do is adding background-color css to the .mat-checkbox-background class.

.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: black !important;
}

And in older versions of Angular we might need to add ::ng-deep as well.

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: black !important;
}

mat-checkbox change ripple color

Similarly to change the ripple mat-checkbox ripple color, we need to change the background color of .mat-ripple-element element.

::ng-deep .mat-checkbox-ripple .mat-ripple-element {
  background-color: black !important;
}

mat-checkbox change color of Indeterminate state.

When a mat-checkbox is in indeterminate state, it will have a class named .mat-checkbox-indeterminate

For the checked state we have .mat-checkbox-checked class as explained above.

So we need to change the background color of .mat-checkbox-background element inside of .mat-checkbox-indeterminate.

::ng-deep .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: black !important;
}

Stackblitz demo

Here is the link to stackblitz demo for mat-checkbox color change.

mat-checkbox-color-demo

mat-checkbox color demo

mat-checkbox color demo

Avatar

Arunkumar Gudelli

Liked this post? Subscribe
Next
Previous