How to get primary or accent color of currently applied theme in angular material 2

Question

I\'m building an app with multiple theme with angular material design 2. I created multiple theme and it\'s working really great. Using this guideline : Angular Material des

Answer 1

I've created a simple mixin to solve this issue.

• Create your themes based on https://material.angular.io/guide/theming#multiple-themes, in my case: I have three of them

$theme: mat-light-theme((color:(primary: $primary,accent: $accent,warn: $warn)));  
$pv-theme: mat-light-theme((color:(primary: $pv-primary,accent: $pv-accent,warn: $pv-warn)));  
$avg-theme: mat-light-theme((color:(primary: $avg-primary,accent: $avg-accent,warn: $avg-warn)));  

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

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

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

• Create a mixin:

@mixin theme($property: null, $key: null) {
  & {
    #{$property}: mat-color(map_get($theme, $key));
  }

  .avg & {
    #{$property}: mat-color(map_get($avg-theme, $key));
  }

  .pv & {
    #{$property}: mat-color(map_get($pv-theme, $key));
  }
}

• Use it like so:

footer .container {
  @include theme(background-color, primary);
}