Changing Primary Color in Angular Material 2

Question

I am trying to change the default primary color in Angular Material 2 (alpha 6).

I got some idea from this official doc.

I located _default-theme.scss from node_modules > @angular2-material > core > style and replaced the color teal by purple in the following line.

$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);

But the color teal is still shown in the page and pink never appears. What am I missing? How can I change the primary color?

(I am using Angular Material 2 alpha 6 with Angular 2 RC4)

Answer 1

Angular 4+ and Angular Material 2.0.0 beta 10, Angular CLI 1.3+

You will have to create a scss file "exampleTheme.scss" , you add it to your angular-cli.json angular-cli.json:

"styles": [
    //if you are using --scss the file is called style.scss
    "styles.css",
    "customTheme.scss"
 ],

In your customTheme.scss you can change your colors in use of the following code:

@import '~@angular/material/theming';
@include mat-core();

  $primary: mat-palette($mat-blue,200);
  $accent: mat-palette($mat-orange,200);

  $theme: mat-light-theme($primary, $accent);

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

Multiple Themes If you want to have an additional theme please read the guide linked in the end. But here a small overview you just have to replicate the theming process with new variables and colors

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

  $dark-theme: mat-dark-theme($primary, $accent);

and add

  .material-dark-theme {
    @include angular-material-theme($dark-theme);
  }

for more detailed information you should read the angular material theme guide