mat-checkbox custom color cannot be changed

Question

I am using Angular Material for my project and I want to change color of mat-checkbox, but don't want to use theming, so obviusly I used Elements and Styles sections in my Chrome Browser and traced classes which mat-checkbox uses and found this: ".mat-checkbox-ripple .mat-ripple-element".

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

So, this is my code, I tried ::ng-deep, /deep/ and without any of those, and result is always the same, checkbox color is not changed, but in "Styles" I can clearly see that it says that I have overwritten its color.

Here are versions of things I use:

"@angular/animations": "^7.1.4",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/material": "^7.2.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",

How can I change color?

user_9423231 · Answer

ripple is the name of the water drop ripple effect that is displayed when you click on Material components, so you're targeting the wrong element.

Use:

// overwrite the checkbox background
::ng-deep .mat-checkbox-checked .mat-checkbox-background, 
.mat-checkbox-indeterminate .mat-checkbox-background {
  background-color: black !important;
}

// overwrite the ripple overlay on hover and click
::ng-deep .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
  background-color: black !important;
}

If you want to change the color globally it's better to use theming.

user_10000326 · Answer

Use global scss in styles.scss and that should work.

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: black;
}

user_10000300 · Answer

for me above answers did not work for indeterminate state while overriding styles in a table, but the below code did

:host ::ng-deep .mat-checkbox-indeterminate,
.mat-checkbox-checked {
    &.mat-primary .mat-checkbox-background {
        background-color: $ your-color !important;
    }
    &.mat-accent .mat-checkbox-background {
        background-color: $ your-color !important;
    }
    &.mat-warn .mat-checkbox-background {
        background-color: $ your-color !important;
    }
}

user_9140740 · Answer

Use css to .mat-checkbox-background

::ng-deep .mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
  background: pink!important;
}

See working code

user_4137209 · Answer

You can add a parent selector as per your requirements:

.mat-checkbox-background {
      border: 2px solid rgba(0, 0, 0, 0);
      background-color: transparent;
    
    }
    .mat-checkbox-checked {
      .mat-checkbox-checkmark {
        background: #ffffff;
        .mat-checkbox-checkmark-path {
          stroke: #2baf35;
          stroke-width: 5px;
        }
      }
    }

Output:

mat-checkbox custom color cannot be changed

5 Answers