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

One of the standard ways to do this is to utilize the /deep/ selector

mat-checkbox {
    color: rgb(0,178,0);
    /deep/ .mat-checkbox-background {
        background-color: rgb(0,178,0);
    }

    /deep/ &.mat-checkbox-focused{
        .mat-ink-ripple{
            background-color: rgba(0, 178, 0, .26);
        }
    }
}

That will allow you to override styles in components where Shadow Dom is enabled.

Answer 2

You can change the color of the border this way.(angular)

::ng-deep .mat-checkbox {
    .mat-checkbox-ripple .mat-ripple-element {
        background-color: #07abe9 !important;
    }
    .mat-checkbox-frame {
        border-color: #07abe9 !important;
    }
}

Answer 3

this solution works well for me

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

Answer 4

For me what has worked is the following:

<mat-checkbox class="tn-checkbox">Check me!</mat-checkbox>

In the css (or in my case sass):

.#{$wf__ns}checkbox {
  .mat-checkbox-ripple {
    .mat-ripple-element {
      background: $cool-blue !important;
    }
  }

  &.mat-checkbox-checked {
    .mat-checkbox-background {
      background: $cool-blue;
    }
    .mat-checkbox-ripple {
      .mat-ripple-element {
        background: $cool-blue !important;
      }
    }
  }
}

Explanation:

The checked background color is changed to mat-checkbox-background within mat-checkbox-checked. IF you want to modify the background color when it is not checked just copy that part and copy it outside of mat-checkbox-checked.

As for the ripple classes, it turns out that the material has an animation when you press the button. That class controls the color of the animation, if you don't change it it will remain the same (pink).

If you do not change it by pressing the checkbox you will see a strange pink effect.

The other answers do not work for me although I rely on the first to develop it.

It may be from my version of angular that I leave below:

Angular CLI: 8.3.25
Node: 13.3.0
Angular: 8.2.14

Answer 5

Angular 7+

This will work for checkbox as well as the initial ripple color. If you just change the background for the checkbox, the initial ripple color won't update. This resolves the issue.

SCSS:

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

    .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
        background-color: $your-color;
     }
}

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

Answer 6

The following will keep frame grey when unchecked but change to custom color when checked:

relevant-scss-file.scss

mat-checkbox {
  &.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
   background: rgb(0,178,0);
  }
}