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 should take care of the default checkbox color

md-checkbox .md-icon {
    background: green;
}
md-checkbox.md-default-theme.md-checked .md-icon {
    background: green;
}

read more here at Angular Material Documentation

Answer 2

You don't have to add css if you'r using theme, just add attribute color to <mat-checkbox>

<mat-checkbox color="primary">Primary</mat-checkbox>

The color of a <mat-checkbox> can be changed by using the color property. By default, checkboxes use the theme's accent color. This can be changed to 'primary' or 'warn' Checkbox | Angular Material

Answer 3

Default color depends upon the theme which you @import.

But angular material also provide way to customize the theme or for customizing the components like changing the color of checkbox.

Steps of doing this as follow :-

1.) Import the _theming.scss file

 @import "../node_modules/@angular/material/theming";

2.) Specify the accent color i.e. color of check box you want to apply like below :-

  // customising of the mat-checkbox accordiing Theme. i am using pink indigo theme 
     bydefault so here I am changing the checkbox color from pink to grey.


    $candy-app-primary: mat-palette($mat-indigo);

    // here I am specify the grey instead of Pink.

    $candy-app-accent: mat-palette($mat-grey, 600, 500, 900);
    $candy-app-warn: mat-palette($mat-red);

    // Create the theme object (a Sass map containing all of the palettes).
    $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

    // here I am only calling checkbox mixin because i only want to change the checkbox color     
    @include mat-checkbox-theme($candy-app-theme);

Hope it will help.

Answer 4

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:

<div class="supplier-details-container">
  <!-- rest of your html here -->
</div>

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.

Answer 5

A combination of answers worked for me in angular 9

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

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #005691 !important;
}
.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: #005691 !important;
}

Answer 6

this solution works well for me

/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #3490d3;
}