Est-il possible de récupérer la palette d'arrière-plan et de premier plan d'un thème angulaire 4?

Question

Je suis en mesure d'obtenir l'accent primaire, et mettre en garde la palette et les enregistrer dans SCSS vars:

$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 
$primary: map-get($candy-app-theme, primary); 
$accent: map-get($candy-app-theme, accent); 
$warn: map-get($candy-app-theme, warn); 

Maintenant, je suis en mesure de style mes propres composants avec des classes CSS. Mais disons que je veux faire une carte css class (ne pouvait pas penser à un meilleur exemple, je sais qu'il y a un composant de carte) avec une couleur de fond légèrement plus claire que l'arrière-plan normal d'un md-sidenav-conteneur par exemple .

Comment est-ce que j'aborderais cela?

J'ai déjà jeté un coup d'oeil @Theming your own components (malheureusement ce n'est pas couvert) Aussi je suis tombé sur this guide.

J'ai essayé - mais dès que j'ai essayé d'obtenir une couleur de premier plan, j'ai eu l'erreur suivante:

color: mat-color($foreground, text); 
//Error 

Module build failed: 
undefined 
     ^
     Argument `$map` of `map-get($map, $key)` must be a map 

Backtrace: 
     node_modules/@angular/material/_theming.scss:1107, in function `map-get` 
     node_modules/@angular/material/_theming.scss:1107, in function `mat-color` 
     src/assets/scss/angular-material/main-theme.scss:22 
     in C:\Users\tobia\Documents\frontend\node_modules\@angular\material\_theming.scss (line 1107, column 11) 
Error: 
undefined 
     ^
     Argument `$map` of `map-get($map, $key)` must be a map 

Backtrace: 
     node_modules/@angular/material/_theming.scss:1107, in function `map-get` 
     node_modules/@angular/material/_theming.scss:1107, in function `mat-color` 

J'espère ne pas perdre de vue quelque chose d'évident. Tout type d'aide serait apprécié :)

Answer 1

Je pense qu'il manque quelque chose à propos de la façon dont vous appliquez le thème personnalisé au thème principal du matériau.

Créer un mixin pour vos thèmes personnalisés dans votre styles.scss -file:

@import 'app/components/ml-file-tree-theme.scss'; 

@mixin custom-theme($theme) { 
    @include ml-file-tree-theme($theme);  
} 

Après cela, vous devez inclure ce mixin au thème matériel:

@include angular-material-theme($my-theme); // default angular material theme 
@include custom-theme($my-theme);   // include custom theme 

Un très bon guide pour thématisation (y compris les thèmes personnalisés) dans Angular Material 2 est par Tomas Trajan: https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1