Material design 2 customize the css component

Question

I would like to customize the css a md-form-field for exemple. I know that I can import a native material theme but I dont have the white color in the palette https://www.materialpalette.com/

I want to change the

$primary: mat-palette($mat-orange, 800);
$accent:  mat-palette($mat-light-blue, 600, 100, 800);

To white #FFF

@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-orange, 800);
$accent:  mat-palette($mat-light-blue, 600, 100, 800);
$warn:    mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

Any Ideas ?

FAISAL · Accepted Answer · 2017-09-11 09:43:22Z

2

You can define your own palette.

@import '~@angular/material/theming';
@include mat-core();

// Your custom palette 
// 
$mat-white: ( 100: #FFF, 200: #FFF, 300: #FFF, 400: #FFF, 500: #FFF, 600: #FFF, 700: #FFF, 
              800: #FFF, 900: #FFF, A100: #FFF, A200: #FFF, A400: #FFF, A700: #FFF, 
              contrast: ( 50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 
                          300: $black-87-opacity, 400: $black-87-opacity, 
                          500: white, 600: white, 700: white, 800: white, 900: white, 
                          A100: $black-87-opacity, A200: $black-87-opacity, 
                          A400: white, A700: white, ) );
//

$primary: mat-palette($mat-white, 800);
$accent:  mat-palette($mat-white, 600, 100, 800);
$warn:    mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

However, if you only want to change css of one control and keep the same theme for rest of the controls, then I will advise you to override that controls styles only.

answered Sep 11, 2017 at 9:43

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edric Over a year ago

Another way is to do @import mat-form-field-theme($theme) with your different theme as the param for $theme.

Collectives™ on Stack Overflow

Material design 2 customize the css component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related