Components: Custom Theme issue

[vapits]

Bug, feature request, or proposal:

Bug? Feature request?

What is the expected behavior?

Following this:
https://github.com/angular/material2/blob/master/docs/theming.md#defining-a-custom-theme
I should be able to introduce a custom the in my project.

Btw current themes (coming with the lib) are working fine. I'm only getting this error with custom themes.

What is the current behavior?

On the compile (angular-cli - webpack)
I'm getting:

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/assets/styles/material-theme.sass
Module build failed:
  $color: map-get($palette, $hue);
         ^
      Argument `$map` of `map-get($map, $key)` must be a map

Backtrace:
    node_modules/@angular/material/core/theming/_theming.scss:54, in function `map-get`
    node_modules/@angular/material/core/theming/_theming.scss:54, in function `md-color`
    node_modules/@angular/material/core/theming/_theming.scss:51, in function `md-color`
    node_modules/@angular/material/core/ripple/_ripple.scss:68, in mixin `md-ripple-theme`
    node_modules/@angular/material/core/_core.scss:26, in mixin `md-core-theme`
    node_modules/@angular/material/core/theming/_all-theme.scss:26, in mixin `angular-material-theme`
    stdin:23
      in /Projects/Jexia/WebApp/node_modules/@angular/material/core/theming/_theming.scss (line 54, column 11)
 @ ./src/assets/styles/material-theme.sass 4:14-185
 @ multi styles

What are the steps to reproduce?

My current setup:

My custom theme:

@import '~@angular/material/core/theming/all-theme'
@import 'variables'
@include md-core()

$primary: '#fab700'
$accent:  '#fab700'
$warn:    md-palette($md-red)

$theme: md-light-theme($primary, $accent, $warn)

@include angular-material-theme($theme)

My angular-cli.json (related part only):

"styles": [
      "./assets/styles/material-theme.sass"
]

Which versions of Angular, Material, OS, browsers are affected?

Angular: 2.0.0
angular-cli: 1.0.0-beta.16

[vapits]

As discuss in gitter it seems that the issue is that you cannot use custom colours but only choose from the palettes that are available in _palette.scss file in theming directory.

I'm guessing this is an issue so I'm not closing it.

[jelbourn]

Your $primary, $accent, etc. are not what the theme function is expecting. If you look at our pre-built themes as examples, you'll see that it's expecting one of the Material Design color palettes (such as $md-red), not just a single color. If you create a map with the same structure it will work.

[guibot17]

@jelbourn It seems that I'm having the same issue, although I'm using the pre-built theme from the Material Design color palettes: $primary: md-palette($md-cyan); $accent: md-palette($md-amber); $warn: md-palette($md-red); just like in the example. But I'm getting the error. Any help would be greatly appreciated.

Below is a screenshot of the error message I'm getting:

[guibot17]

Hey guys, based on the Backtrace of my error report, I looked at the
nodemodules/@angular/material/core/ripple/_ripple.scss ligne 65
and found out this:
$accent: map-get($theme, accent);
which means the function map-get requires a second argument which is an accent color from the material design palette. In other word, to define the $accent palette, we need to define both the primary $md-colorname and any accent color code as such:
$accent: md-palette($md-blue, A200, A100, A400);

Accordingly, @vapits both your primary and accent color closest match is the Amber from the material design palette. Also, this is what I suggest:

$primary: md-palette($md-amber);
$accent: md-palette($md-amber, A200, A100, A400);

Everything else stays the same, as it looks correct to me.

Then you may change your primary and accent color just by using any of the color name definition in the node_modules\@angular\material\core\theming_palette.scsss file

Please let us know how it goes.

[nshahpazov]

Hey guys, did this issue got resolved. I'm having the same problem and I'm not using custom colours.

[MadUser]

I got the same issue only on prod build. dev build works fine.

[amaneer94]

same issue for me.. works fine for dev but custom classes stop working in prod build/

[amaneer94]

Theme works if we run prod mode with AOT disabled.
ng build --prod --aot=false

[hawkrdg]

If this issue is resolved, I am still having trouble:
Win7x64
cli v1.1.3
material v2.0.0-beta.7
angular v4.0.0
node v8.1.2

.angular-cli.json:
"styles": [
"styles.css",
"custom-theme.scss"
],

custom-theme.scss:
@import '~@angular/material/theming';
@include mat-core();

$myPrimary: mat-palette($mat-cyan);
$myAccent: mat-paletter($mat-amber, A400, A100, A700);
$myWarn: mat-palette($mat-orange);

$custom-theme: mat-light-theme($myPrimary, $myAccent, $myWarn);

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

just like in the guide using defined color palettes.

CLI bombs with

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader
?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision
":8,"includePaths":[]}!./src/custom-theme.scss
Module build failed:
undefined
^
Argument $map of map-get($map, $key) must be a map

So any help will be greatly appreciated...

[swprqa]

@hawkrdg
$myAccent: mat-paletter($mat-amber, A400, A100, A700);

I also had a typo in the function name :)

[nhducseuit]

I'm having same issue. I just tried to create a custom theme with sample on StackOverflow then ran "ng serve" to compile and see if it work. Angular material version 2.0.0-beta.8

The custom theme I tried with:

@import '~@angular/material/_theming';

$mat-custom: (
  50: #eceff1,
  100: #cfd8dc,
  200: #b0bec5,
  300: #90a4ae,
  400: #78909c,
  500: #607d8b,
  600: #546e7a,
  700: #455a64,
  800: #37474f,
  900: #263238,
  A100: #cfd8dc,
  A200: #b0bec5,
  A400: #78909c,
  A700: #455a64,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: white,
    500: white,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: $white-87-opacity,
  )
);

@include mat-core();

$my-app-primary: mat-palette($mat-custom);
$my-app-accent:  md-palette($mat-pink, A200, A100, A400);
$my-app-warn:    md-palette($mat-red);

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

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

.alternate-theme {
  $alternate-primary: mat-palette($mat-light-blue);
  $alternate-accent:  mat-palette($mat-yellow, 400);

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

  @include angular-material-theme($alternate-theme);
}

[swprqa]

@nhducseuit again, look for typos:
$my-app-primary: mat-palette($mat-custom);
$my-app-accent: md-palette($mat-pink, A200, A100, A400);
$my-app-warn: md-palette($mat-red);

[odahcam]

For anyone that is worryed about how to create these palettes, you can use tools like mcg, example.

[neverlose-lv]

Make sure you write correct function!
mat-palette is correct
md-palette is wrong
mat-pallete is wrong
mat-palleter is wrong

[mieszczans]

Still has error.
`
@import '~@angular/material/theming';
@include mat-core();

$palette-ssnavy:
rgb(230, 232, 243)
rgb(193, 197, 226)
rgb(152, 159, 207)
rgb(110, 121, 188)
rgb(79, 92, 173)
rgb(48, 63, 159)
rgb(43, 57, 151)
rgb(36, 49, 141)
rgb(30, 41, 131)
rgb(19, 27, 114)
rgb(168, 174, 255)
rgb(117, 126, 255)
rgb(66, 79, 255)
rgb(41, 55, 255)
;

$palette-ssnavy-50: nth($palette-ssnavy, 1);
$palette-ssnavy-100: nth($palette-ssnavy, 2);
$palette-ssnavy-200: nth($palette-ssnavy, 3);
$palette-ssnavy-300: nth($palette-ssnavy, 4);
$palette-ssnavy-400: nth($palette-ssnavy, 5);
$palette-ssnavy-500: nth($palette-ssnavy, 6);
$palette-ssnavy-600: nth($palette-ssnavy, 7);
$palette-ssnavy-700: nth($palette-ssnavy, 8);
$palette-ssnavy-800: nth($palette-ssnavy, 9);
$palette-ssnavy-900: nth($palette-ssnavy, 10);
$palette-ssnavy-A100: nth($palette-ssnavy, 11);
$palette-ssnavy-A200: nth($palette-ssnavy, 12);
$palette-ssnavy-A400: nth($palette-ssnavy, 13);
$palette-ssnavy-A700: nth($palette-ssnavy, 14);

$palette-ssorange:
rgb(255, 240, 225)
rgb(255, 217, 179)
rgb(255, 191, 128)
rgb(255, 165, 77)
rgb(255, 146, 39)
rgb(255, 127, 1)
rgb(255, 119, 1)
rgb(255, 108, 1)
rgb(255, 98, 1)
rgb(255, 79, 0)
rgb(255, 255, 255)
rgb(255, 245, 242)
rgb(255, 207, 191)
rgb(255, 188, 166)
;

$palette-ssorange-50: nth($palette-ssorange, 1);
$palette-ssorange-100: nth($palette-ssorange, 2);
$palette-ssorange-200: nth($palette-ssorange, 3);
$palette-ssorange-300: nth($palette-ssorange, 4);
$palette-ssorange-400: nth($palette-ssorange, 5);
$palette-ssorange-500: nth($palette-ssorange, 6);
$palette-ssorange-600: nth($palette-ssorange, 7);
$palette-ssorange-700: nth($palette-ssorange, 8);
$palette-ssorange-800: nth($palette-ssorange, 9);
$palette-ssorange-900: nth($palette-ssorange, 10);
$palette-ssorange-A100: nth($palette-ssorange, 11);
$palette-ssorange-A200: nth($palette-ssorange, 12);
$palette-ssorange-A400: nth($palette-ssorange, 13);
$palette-ssorange-A700: nth($palette-ssorange, 14);

// CORE THEME OPTIONS
$primary: mat-pallete($palette-ssorange);
$action: mat-pallete($palette-ssnavy);
$ss-theme: mat-light-theme($primary, $action);

@include angular-material-theme($ss-theme);`

[bmoman]

Has this been resolved? I'm getting the same error. However, when I remove the "warn" from the mat-light theme as follows, the error no longer occurs so it appears to be an issue with the optional warn parameter

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

[neverlose-lv]

make sure you write mat-palette!
mat-pallete - is not correct
it's double t, not double l

[odahcam]

It's worth to look again: https://github.com/angular/material2/issues/1461#issuecomment-369183835

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}