How to get the main or accent color of the current theme in angular 2 material

Question

I am creating an application with several themes with angular 2 material design. I have created several themes and it works great. Using this guide: Angular Material Design Theme

But the problem is that if the user selects, for example, a "green theme". Then I want to display his / her name in green and so on. But how can I get the currently selected theme in this case "green" in my component style, and then use this main variable in my username class to change its color

Answer 1

, "" , , . , . , ( DIV, SPAN ..) , . , , 2 Angular 2.

: :

@import '~@angular/material/_theming.scss';

@include mat-core();

// default theme:
$primary: mat-palette($mat-blue,800);
$accent: mat-palette($mat-teal);
$theme: mat-light-theme($primary, $accent);

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

// "dark" theme
$dark-p: mat-palette($mat-blue-grey, 500);
$dark-a: mat-palette($mat-blue-grey,900);
$dark-t: mat-dark-theme($dark-p, $dark-a);

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

scss :

@import '../../themes/main-theme';  //  <-- the theme file shown above

//default palette forground/background:
$light-foreground-palette: map-get($theme, foreground);
$light-background-palette: map-get($theme, background);

//dark palette forground/background:
$dark-foreground-palette: map-get($dark-t, foreground);
$dark-background-palette: map-get($dark-t, background);

.light-colors{
    background-color : mat-color($primary, default);
    color: mat-color($light-foreground-palette, text);
}
.dark-colors{
    background-color : mat-color($dark-p, default);
    color: mat-color($dark-foreground-palette, text);
}

"" ( , , , , ), isDarkTheme. , .

, , ngClass isDarkTheme:

<div [ngClass]="{'light-colors' : !svc.isDarkTheme,'dark-colors' : svc.isDarkTheme}">
...my content...
</div>

div, , ngClass, darkTheme isDarkTheme. Material-aware , light-colors dark-colors , . , , , .

, , : "" ($primary $dark-p ):

$accent $warn.

" " ($light-foreground-palette $dark-foreground-palette ):

• divider
• -

"background" ($light-background-palette $dark-background-palette ):

• -
• -
• -
• -

, :

• https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1
• Angular Material2?
• https://material.angular.io/guide/theming-your-components
• _theming.scss : https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss

80% , , , , , ...

Answer 2

class="mat-primary" class="mat-accent" HTML-, .