Custom theme in Material 2 returns: Argument `$map` of `map-get($map, $key)` must be a map

Question

I'm having a lot of difficulty implementing a custom theme for Angular 2 Material. I've been following the guides at:

• https://material.angular.io/guide/theming
• https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html

and have generated custom palettes for my colors. For example my "primary" color:

$dz-primary: (
    50 : #e8ebee,
    100 : #c6cdd4,
    200 : #a0acb7,
    300 : #7a8a9a,
    400 : #5e7184,
    500 : #41586e,
    600 : #3b5066,
    700 : #32475b,
    800 : #2a3d51,
    900 : #1c2d3f,
    A100 : #82baff,
    A200 : #4f9eff,
    A400 : #1c83ff,
    A700 : #0275ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);

When I attempt to create the custom theme:

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

@import './theme/dz-primary';
@import './theme/dz-accent';

$dz-theme-primary: mat-pallete($dz-primary);
$dz-theme-accent: mat-pallete($dz-accent);
$dz-theme: mat-light-theme($dz-theme-primary, $dz-theme-accent);

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

The compiler always returns:

Argument $map of map-get($map, $key) must be a map

Backtrace: node_modules/@angular/material/_theming.scss:1118, in function map-get node_modules/@angular/material/_theming.scss:1118, in function mat-color node_modules/@angular/material/_theming.scss:1530, in mixin mat-option-theme node_modules/@angular/material/_theming.scss:3854, in mixin mat-core-theme node_modules/@angular/material/_theming.scss:3920, in mixin angular-material-theme stdin:11 in C:\Users\Brandon\work\angular-apps\dz-ui\node_modules\@angular\material_theming.scss (line 1118, column 11)

This seems to be an issue with the mat-color() function not accepting the palette, but I can't seem to find what's wrong.

I have also tried using built-in colors from Material as referenced in the tutorials, but I receive the same error.

Answer 1

Looks like you spelt mat-palette as mat-pallete.

$dz-theme-primary: mat-palette($dz-primary); // <- Here
$dz-theme-accent: mat-palette($dz-accent); // <- Here
$dz-theme: mat-light-theme($dz-theme-primary, $dz-theme-accent);