angular 5 material change custom component theme

Question

J'ai beaucoup de mal avec les thèmes. J'ai besoin de changer le thème à la volée. Pour le composant par défaut, cela semble fonctionner correctement, mais pour les composants personnalisés, je ne comprends pas. Voici l'implémentation :

J'ai un styles.scss

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.widget-para-title {
    font-size: small;
    margin-top:10px;
    color:#4A90E2;
    font-weight:bold;
    margin-bottom:0px;
    padding: 5px;
    font-family: Roboto,"Helvetica Neue",sans-serif;
}

** theme.scss**

@import '~@angular/material/theming';

@include mat-core();

$custom-primary: mat-palette($mat-blue-grey,500);
$custom-accent:  mat-palette($mat-lime, 100);
$custom-warn:    mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

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

//Orange theme
$ora-primary: mat-palette($mat-orange, 800);
$ora-accent:  mat-palette($mat-grey, 200);
$ora-warn:    mat-palette($mat-red);
$ora-theme: mat-light-theme($ora-primary, $ora-accent);

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

//green theme
$green-primary: mat-palette($mat-green, 800);
$green-accent:  mat-palette($mat-grey, 200);
$green-warn:    mat-palette($mat-red);
$green-theme: mat-light-theme($green-primary, $green-accent);

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

J'utilise l'outil ci-dessous pour changer de thème à la volée. app.component.ts

setTheme(theme:string){
      //var theme='green-theme'
      this.overlayContainer.getContainerElement().classList.add(theme);
      this.componentCssClass = theme;
  }

Ce qui me bloque, c'est que dans le fichier styles.css, la couleur est actuellement codée en dur, alors qu'elle devrait être la même que la valeur de la couleur primaire du thème actuel. Alors, quelle modification dois-je apporter au code ci-dessus pour que cela fonctionne ?

Answer 1

Actuellement, la meilleure pratique consiste à créer un mixin pour chaque composant que vous souhaitez thématiser.

@mixin widget-theme($theme) {
  $primary: map-get($theme, primary);

  .widget-para-title {
      color: mat-color($primary);
      // other styles
    }
  }

@include widget-theme($custom-theme);

.green-theme {
   @include widget-theme($green-theme);
 }

.ora-theme {
   @include widget-theme($ora-theme);
 }

Lire la suite thématiser vos propres composants