Angular 4 - Material Theme customization

Question

I'm trying to set my custom theme in Angular Material. My problem is when i want to import mixin angular-material-theme, i'm getting this error:

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/theme.scss Module build failed: undefined ^ Argument $map of map-get($map, $key) must be a map

Backtrace: node_modules/@angular/material/_theming.scss:1166, in function map-get node_modules/@angular/material/_theming.scss:1166, in function mat-color node_modules/@angular/material/_theming.scss:1325, in mixin mat-option-theme node_modules/@angular/material/_theming.scss:3739, in mixin mat-core-theme node_modules/@angular/material/_theming.scss:3808, in mixin angular-material-theme stdin:12 in E:\PC_SHOP\pcShop-Final\PcShop-Final\node_modules\@angular\material_theming.scss (line 1166, column 11)

My sass code:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~@angular/material/_theming.scss';

@include mat-core();

$primary: mat-pallete($mat-orange, 500);
$accent: mat-palette($mat-blue-grey, 800);
$warn: mat-palette($mat-pink, 400);

$app-theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($app-theme);

Posting image of code instead of code itself denies index-ability so other users with same error will not find your question by searching for the error message. In short, you ask for help while denying help to others. Consider replacing the image with the code itself. — tao

Kyle Krzeski Kyle Krzeski · Accepted Answer · 2018-03-17T19:07:29

Just a typo that's all, that's why it doesn't map to a color and you're getting that error (you have pallete instead of palette). Should be:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~@angular/material/_theming.scss';

@include mat-core();

$primary: mat-palette($mat-orange, 500);
$accent: mat-palette($mat-blue-grey, 800);
$warn: mat-palette($mat-pink, 400);

$app-theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($app-theme);

Angular 4 - Material Theme customization

1 Answers