CODEWITHSUNDEEP
angular-materialangular-material2angular2-forms
imtah
imtah

Reputation: 409

Material design 2 customize the css component

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 ?

Upvotes: 1

Views: 223

Answers (1)

FAISAL
FAISAL

Reputation: 34673

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.

Upvotes: 2

Related Questions