Angular 6 Material - Hues and How to change the color of mat radio button

Question

How can I change the color of the using CSS?

Saw on another post that if I use the following code, it would change it, but I had no luck with it so far.

Answer 1

add this css in your style.css/style.scss

Stackblitz

style.css/style.scss

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{
  border-color:rgb(66, 134, 244); 
}

.mat-radio-button.mat-accent .mat-radio-inner-circle{
  color:rgb(66, 134, 244);
  background-color:rgb(66, 134, 244) ;
}

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:rgb(255, 37, 37,.26);
}

Answer 2

::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  background-color: blue !important;
}

::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: blue!important;   /*inner circle color change*/
}

::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
 border-color:blue!important; /*outer ring color change*/
}

Answer 3

You can set custom color using following approach:

Put this code in your module declaration:

providers: [{
    provide: MAT_RADIO_DEFAULT_OPTIONS,
    useValue: { color: 'accent' },
}]

Answer 4

None of the above worked for me. But this one worked i.e put color="primary" on mat -radio button. ie

<mat-radio-button color="primary" value=1>Active</<mat-radio-button>. 

See example below

https://stackblitz.com/edit/angular-material2-issue-ethbcx

Answer 5

The solution that worked for me was this, add this to your:

style.css/style.scss

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:  rgb(22, 92, 125) !important;
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color:  rgb(22, 92, 125) !important;
    z-index: 3;
}

.mat-radio-button .mat-radio-outer-circle {
    border-color:  rgb(22, 92, 125) !important; // Override material
    z-index: 3;
}