Argument `$color` of `opacity($color)` must be a color

user_903137 0
Viewed 2818

I am trying to create Angular 2 theme, I follow the tutorial as mentioned on the site. This is my theme file. 

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

@include mat-core();
$primary: mat-palette($mat-deep-purple);
$accent:  mat-palette($mat-amber, A200);
$theme: mat-light-theme($primary, $accent);

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

.m2app-dark {
  $dark-primary: mat-palette($mat-blue, A800);
  $dark-accent:  mat-palette($mat-light-blue, A8008);
  $dark-warn:    mat-palette($mat-orange, A200);
  $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
  @include angular-material-theme($dark-theme);
}

While building I am getting following exeception

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

Backtrace:
        node_modules/@angular/material/_theming.scss:1119, in function `opacity`
        node_modules/@angular/material/_theming.scss:1119, in function `if`
        node_modules/@angular/material/_theming.scss:1119, in function `mat-color`
        node_modules/@angular/material/_theming.scss:1508, in mixin `mat-option-theme`
        node_modules/@angular/material/_theming.scss:3798, in mixin `mat-core-theme`
        node_modules/@angular/material/_theming.scss:3848, in mixin `angular-material-theme`
        stdin:15
      in C:\my-data\code\xenia\xenia-ui\node_modules\@angular\material\_theming.scss (line 1119, column 34)
Error:
undefined
                                ^
      Argument `$color` of `opacity($color)` must be a color

Backtrace:
        node_modules/@angular/material/_theming.scss:1119, in function `opacity`
        node_modules/@angular/material/_theming.scss:1119, in function `if`
        node_modules/@angular/material/_theming.scss:1119, in function `mat-color`
        node_modules/@angular/material/_theming.scss:1508, in mixin `mat-option-theme`
        node_modules/@angular/material/_theming.scss:3798, in mixin `mat-core-theme`
        node_modules/@angular/material/_theming.scss:3848, in mixin `angular-material-theme`
        stdin:15
      in C:\my-data\code\xenia\xenia-ui\node_modules\@angular\material\_theming.scss (line 1119, column 34)
    at options.error (C:\my-data\code\xenia\xenia-ui\node_modules\node-sass\lib\index.js:291:26)
 @ ./src/app-theme.scss 4:14-190
 @ multi ./src/styles.css ./src/app-theme.scss

Please let me know what am I doing wrong. Thanks

angular-material angular
2 Answers

The second option you are passing should also be a color code. Different colors have different color codes, any random number will not work. The complete list can be found here - https://material.io/design/color/#tools-for-picking-colors

So in your case, both these should work:

$dark-primary: mat-palette($mat-blue, A700);
$dark-primary: mat-palette($mat-blue, 800);

As both these are recognized shades

user_97998740

I think the issue is with this line

$primary: mat-palette($mat-deep-purple);

Replace it with below line :

$primary: mat-palette($mat-deep-purple,A100);
user_23494070
Related