Angular Material colors don't change using custom themes

Question

I want to change the colors for "warn", "accent", and "primary". However, I can only change the "primary" with my code, while "warn" and "accent" don't change.

My theme.scss:

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

$my-app-primary: mat-palette($mat-green);
$my-app-accent: mat-palette($mat-grey);
$my-app-warn: mat-palette($mat-cyan);

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

.alt-theme {
  @include angular-material-theme($my-app-theme);
}

My progress-bar-determinate-example.html:

<mat-progress-bar class="alt-theme" mode="determinate" value="40" color="primary"></mat-progress-bar>

My angular-cli.json:

{
  "apps": [{
    "styles": [
      "styles.css",
      "theme.scss"
      ]
  }]
}

If I set color="primary", it turns to green as intended in theme.scss, but if I change it to "warn" or "accent" it will not turn to cyan and grey in my case. It will remain Red and Yellow as default for Material.

My scope is to change the progress bar colors in a certain component, not site wide.

Can you help me figure out what am I doing wrong?

A live demo of this code is here.

It doesn't, I changed something which made it globally thus "made it work". In my scenario it does not — Mike Me, Jun 12 '18 at 19:45
ohkk, can you share your angular-cli.json something fishy must be there... — AlokeT, Jun 12 '18 at 20:02
https://stackoverflow.com/a/49665215/1931563 please follow this answer and create a new app if possible, and then check for same error is there or not. — AlokeT, Jun 13 '18 at 09:48

score -3 · Accepted Answer · answered Jun 12 '18 at 03:21

-3

Looking at your Theme definitions, they almost seem correct. For clarification and better arrangement of your code, you should define similar to this write up HERE.

This should help fix your issue.

answered Jun 12 '18 at 03:21

Andrew Lobban

2,065
2
24
38

Angular Material colors don't change using custom themes

1 Answers1