Angular 6 Material retreive material colors

Question

"@angular/material": "^6.2.1" Got quite stuck with a very minor issue. Can't import any standard material color in any of my app's css/scss files, including styles.scss

example:

$app-panel-green: mat-color($mat-green);

gives this error in any scss file:

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed: 
$app-panel-green: mat-color($mat-green);
                           ^
      Undefined variable: "$mat-green".
      in /**********/src/styles.scss (line 1, column 29)

styles.scss consits only of (except previous):

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
/*@import './theme.scss';*/

body { margin: 0; }

and pre-built theme works just fine. I don't even need a custom theme, just want to use material color palette.

Commercial Suicide Commercial Suicide · Accepted Answer · 2018-06-21T23:18:25

If you want to use one of default palettes, you can do it like this:

@import '~@angular/material/theming'; // Pay attention on the path
@include mat-core();
$candy-app-primary: mat-palette($mat-deep-orange);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

And don't forget to include the file with your theming to .angular-cli.json to styles section.

Angular 6 Material retreive material colors

1 Answers