Angular - material color change

Question

I use the angular -material2 checkbox. Currently, the default flag color is purple.
Looks like they changed the default color of the checkbox from "primary" to accent.
Is there a way to get a "primary" (green) color instead of purple without overriding css.
I tried giving color = "primary", but that didn't work.

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

Import operation:

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

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

Answer 1

One of the standard ways to do this is to use / 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); } } } 

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

Answer 2

You do not need to add css if you are using a theme, just add the attribute color to <mat-chechkbox>

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

Color can be changed using the color property. By default, checkboxes use the theme accent color. This can be changed to “primary” or “alert” Checkbox | Corner material

Answer 3

This should take care of the default flag color.

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

more info here Angular Material Documentation

Answer 4

With beta 2 from Angular material, the color attribute should work.

There were some problems before beta testing.

See commit , which fixed this problem.

Answer 5

The following will keep the frame gray if not checked, but changed to a custom color if checked:

relation-SCS-file.scss

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

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

Answer 7

Since deep is not recommended. In my opinion, the correct way to do this is to use encapsulation: ViewEncapsulation.None .

eg:

 @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 things. In SASS, nested classes should handle this correctly.

You can get more details here: fooobar.com/questions/15186427 / ...

Answer 8

The default color depends on the theme you @import .

But corner material also provides a way to customize the theme or customize components such as changing the color of the check box .

The steps to do this are as follows:

1.) Import the _theming.scss file

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

2.) Indicate the color of the accent, i.e. the color of the flag you want to apply as shown 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 this helps.

Answer 9

For angular material 7 works for outline color and inside is painted over

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