angular 4 custom theme

I'm new to angular 4 and Angular material.Currently I'm using angular 4 and trying to create a custom theme. When creating the custom-theme.scss file, we are using variables to assign colors to primary, accent and warn like follows,

$my-app-primary: mat-palette($mat-light-orange);
$my-app-accent: mat-palette($mat-white);
$my-app-warn: mat-palette($mat-red);

I'm bit confused about this mat-palette($mat-light-orange);, because I can't understand the way it assigns variables to primary, accent and warn colors. What is the meaning of mat-palette and how can we assign custom colors to this?

This is the code I used in custom-theme.scss, but it's not working.

@import '~@angular/material/theming';
@include mat-core();
$mat-light-orange:#fbab4a;
$mat-white:#ffffff;
$mat-red:#e95337;
$my-app-primary: mat-palette($mat-light-orange);
$my-app-accent: mat-palette($mat-white);
$my-app-warn: mat-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);

Solution

If you are using Angular CLI, you'd need to include this file in the styles array property of the file .angular-cli.json to ensure the build process includes this custom theme in your application.

...
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
  "styles.css",
  "custom-theme.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}
...

If you are NOT using Angular CLI, you'd need to use some sort of build process or at minimum a tool such as node-sass to compile the SCSS to CSS. Once compiled, you need to link to the file in something like index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Foobar</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="path/to/compiled/assets/custom-theme.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Just creating the SCSS file will likely NOT be enough. It depends on the build process you are using to detect and process assets such as SCSS style files.

In regards to the SCSS variables for colors such as $mat-indigo, these be found in _palette.scss within the source and tie to the colors of Material Design Colors. These variables can be used within your custom theme SCSS file as needed for your design. So the color you are trying to reference $mat-light-orange, isn't a valid/existing palette/ and may not come out as you expect. You'd instead target the existing palettes such as $mat-orange and use the optional parameters to target specific hues such as A200 which comes out to color code #FF9100. mat-pallete() and mat-light-theme() are custom Sass @functions in the Angular Material source that take inputs such as the color palettes and generate/compiles the theme CSS.

$my-app-accent: mat-palette($mat-orange, A200);

Hopefully that helps!