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 "primary" to accent.
Is there a way to get "primary"(green) color instead of purple without overriding css.
I tried giving color="primary" to but that didn't worked.

Code : <md-checkbox></md-checkbox>

Import statement:

import {MdCheckbox} from '@angular2-material/checkbox';

Plunker http://plnkr.co/edit/sFC0kfdzj7fxtUC3GXdr?p=preview

abstractME · Answer 1 · 2022-09-01T23:19:46.887

44

Based on feedback from comments, updated my answer by removing '::ng-deep', but please read comment by @colin-fox, and understand how this will behave in global styling and at component level, many thanks!

For Angular Material 7, works for outline color and inside filled in color

.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;
  }

edited Sep 01 '22 at 23:19

answered Aug 14 '19 at 02:41

abstractME

531
6
10

1

This is the correct answer. However, I would remove the opacity because it leaves a faded mark. Also, this doesn't change the color of the initial ripple. – Eray T Nov 26 '19 at 16:07
Thanks, It worked for me but for angular 9 we must removed '::ng-deep' to work it properly. – Maulik Parmar Jul 07 '20 at 03:40
ng-deep will be depracated, I believe... I had work around, I posted it here somewhere. Hope that helps. – Gel Sep 11 '20 at 18:10
This also works in Angular Material 11.x Great tip and a funny bit is that your sample also included the exact color setup i wanted ! – Tore Aurstad Mar 23 '21 at 12:57
Is ::ng-deep required? I removed it and it works fine. – Halil Dec 22 '21 at 11:57
3

@Halil it definitely shouldn't be required but the Angular team has made it difficult if not impossible to style things without ng-deep or without making the style global by putting it in styles.css (ng-deep not needed there). I mean we could just use selectors and put everything in styles.css for all Material related things but that seems a bit ridiculous – Collin Apr 22 '22 at 17:49

score 36 · Answer 2 · edited Nov 30 '20 at 13:38

36

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

edited Nov 30 '20 at 13:38

Stephen Paul

37,253
15
92
74

answered Nov 29 '18 at 11:41

Khan Abdulrehman

816
2
10
22

2

so if I want to use our corporate colors, outside of the theme, how do I change the color? – Gel Sep 11 '20 at 18:01

score 15 · Answer 3 · edited Jul 12 '18 at 00:56

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.

score 12 · Answer 4 · edited Jun 29 '21 at 21:34

12

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;
}

edited Jun 29 '21 at 21:34

naveen

53,448
46
161
251

answered Feb 19 '20 at 23:00

Omar Pacheco

129
1
2

score 9 · Answer 5 · answered Jun 28 '19 at 02:25

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.

This isn't as helpful as the person doesn't want to and shouldn't change their entire theme just for a single components coloring — Jonathan Southern, Nov 01 '19 at 20:50

score 5 · Answer 6 · answered Nov 26 '19 at 16:22

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;
    }
}

score 5 · Answer 7 · answered Feb 20 '23 at 10:40

5

Update for Angular Material 15:

.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background, .mdc-checkbox__ripple {
    background-color: green !important;
    border-color: green !important;
}

answered Feb 20 '23 at 10:40

Dominik Brázdil

319
2
7

score 3 · Answer 8 · answered Jun 21 '20 at 20:34

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;
}

score 2 · Answer 9 · answered Mar 02 '17 at 19:56

2

With beta.2 of Angular Material, the color attribute should work.

There were some issues with it before beta.2

See the commit that fixed that issue.

answered Mar 02 '17 at 19:56

DevVersion

1,923
14
15

score 2 · Answer 10 · answered Oct 27 '20 at 12:38

There are two methods(that i know ) to change the background color of mat-checkbox (angular 9)-

method 1 - by using color property of the mat-checkbox .

       <mat-checkbox
          id="{{ subtask.name }}"
          [color]="accent"
        >
          Check
        </mat-checkbox>

Limitation - You can only use color according to the angular material theme by this method .

method 2 - If you want to give custom colors to the mat-checkbox first track down the classes till the target class you want to change color of. tracking of nested classes

after that write like this in your style.css(global) file-

1st checkbox

.l0
  .mat-checkbox-checked
  .mat-checkbox-layout
  .mat-checkbox-inner-container
  .mat-checkbox-background {
  background-color: #ffbf00 !important;
}

2nd checkbox

.l1
  .mat-checkbox-checked
  .mat-checkbox-layout
  .mat-checkbox-inner-container
  .mat-checkbox-background {
  background-color: #4caf50 !important;
}

Result - different color for different mat-checkbox

score 2 · Answer 11 · answered Feb 25 '21 at 09:54

This worked for me with Angular 10: In your styles.scss:

//Change background color

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #1f45cc;
}

//Change the border color for both checked and unchecked cases

.mat-checkbox-frame {
  border-color: #1f45cc;
}

score 1 · Answer 12 · answered May 20 '16 at 06:59

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

answered May 20 '16 at 06:59

Pirate X

3,023
5
33
60

1

This is for angular-material 1.8. My question is for material2. Changing css is one of the way but I'm looking for a way to do it without changing/overriding css because angular-material2 itself has lot many themes. I want a way to use existing theme without overriding css. – Krishna May 20 '16 at 07:06
Correct me if I am wrong but I think the latest version for `Angular-Material is 1.0.8`. – Pirate X May 20 '16 at 07:11
Yes you are correct. Released version is 1.0.8. But angular-material2 is in alpha version and is yet to released. angular-material2 is for angular2. – Krishna May 20 '16 at 07:16

score 1 · Answer 13 · answered Aug 30 '18 at 03:10

1

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);
  }
}

answered Aug 30 '18 at 03:10

shuk

1,745
1
14
25

score 1 · Answer 14 · answered Mar 04 '19 at 10:39

Since deep is deprecated. In my view the right way to do it is using encapsulation: ViewEncapsulation.None.

ex:

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
})

Then you just need to change the class

.mat-checkbox-background {
  background-color: green;
}

You just need to be careful to deal with global css stuff. In SASS nested classes should handle it properly.

You can have more details here: https://stackoverflow.com/a/54672579/783364

score 1 · Answer 15 · edited May 29 '20 at 10:29

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

score 1 · Answer 16 · answered Oct 10 '20 at 15:39

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;
    }
}

score 0 · Answer 17 · answered Mar 06 '20 at 16:07

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

.mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
      background-color: $your-color!important;
}

score 0 · Answer 18 · answered Sep 11 '20 at 18:09

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.

Wrap your component html with a class. Forexample:

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

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.

score 0 · Answer 19 · answered Jun 30 '23 at 15:04

For Angular Material 15 To go alongside @Dominik Brázdil answer - You can use the mdc css variables to change the colour, you can find the different states in the inspect elements.

.mat-mdc-checkbox {
    --mdc-checkbox-state-layer-size: 16px;

    &.mat-accent {
        --mdc-checkbox-selected-focus-icon-color: #2E2E38 !important;
        --mdc-checkbox-selected-hover-icon-color: #2E2E38 !important;
        --mdc-checkbox-selected-icon-color: #2E2E38 !important;
        --mdc-checkbox-selected-pressed-icon-color: #2E2E38 !important;
    }
}

Ayman Ftiti · Answer 20 · 2017-06-30T11:12:33.750

-1

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;
}

edited Jun 30 '17 at 11:12

answered Jun 30 '17 at 09:16

Ayman Ftiti

65
2

angular-material change checkbox color

20 Answers20

Linked