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

This is what works. On our JHIPSTER project, we have a global.scss. Here is what you need to do if you do have a global.

1. Wrap your component html with a class. Forexample:

2. In the global.scss or global.css write your css/scss like so (Im using red to test):

.supplier-details-container .mat-checkbox-ripple .mat-ripple-element,.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: red !important;
}

Basically using css hierarchy wrapping the native angular material css with your component class that you use to wrap your component html.

Let me know if it works or not. We can debug.