angular 4 custom theme

Question

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);

Are you using Angular CLI? If so, have you included `custom-theme.scss` in the `styles` array property of `angular-cli.json`? If not, have you compiled this scss file to css and included it in `index.html` or similar? — Alexander Staroselsky, Aug 22 '17 at 18:38
Yes I'm using Angular CLI and it's already included in the angular-cli.json file as below, "styles": [ "styles.scss", "custom-theme.scss" ], But still not working — M_TAM, Aug 23 '17 at 02:58
Okay, that means that the values such as `$mat-light-orange` you are passing to the `mat-pallete()` sass @function are not valid. There are predefined palette variables in the Angular Material source files. Please see my answer for further information. — Alexander Staroselsky, Aug 23 '17 at 03:23

Alexander Staroselsky · Accepted Answer · 2017-08-22T20:55:36.077

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!

Thanks, It's working. I think there was a problem when assigning colors. — M_TAM, Aug 23 '17 at 04:14

Philipp Kief · Answer 2 · 2017-08-22T21:07:48.123

You can insert the theme in your .angular-cli.json file:

"styles": [
    "styles.scss",
    "custom-theme.scss"
]

Alternatively you can import it in your global styles.scss file:

@import 'custom-theme.scss';

What is the meaning of mat-palette

mat-palette is a mix-in that generates the color palette for your application. It generates colors for texts, backgrounds etc. that are needed for the material components. All you have to do is to insert some material colors as arguments to the mix-in:

$app-primary: mat-palette($mat-indigo, 800, 300, 900);
$app-accent: mat-palette($mat-light-blue);
$app-warn: mat-palette($mat-deep-orange, A200);

The numbers behind the color variable (e.g. $mat-indigo, 800, 300, 900) specify the default, lighter and darker contrast of your color palette.

I hope this helps you!

angular 4 custom theme

2 Answers2