CODEWITHSUNDEEP
cssangularsass
user7776077
user7776077

Reputation:

Angular 4 - Material Theme customization

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

Upvotes: 1

Views: 2211

Answers (1)

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

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

Upvotes: 2

Related Questions