Custom Theme issue

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

[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.

[odahcam]

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