Je construis une application avec plusieurs thèmes avec un design de matériau angulaire 2. J'ai créé plusieurs thèmes et cela fonctionne vraiment bien. En utilisant cette directive: Angular Thème de conception des matériaux
Mais le problème est que si l'utilisateur sélectionne "thème vert" par exemple. Ensuite, je veux afficher son nom en vert et ainsi de suite. Mais comment puis-je obtenir le thème actuellement sélectionné dans ce cas "vert" dans mon style de composant, puis utiliser cette variable principale dans ma classe de noms d'utilisateur pour changer sa couleur
Je ne suis pas sûr que ce soit la "bonne" façon de le faire, mais cela fonctionne, alors je le lance pour le moment. Je vais m'adapter s'il y a un meilleur moyen. Mon objectif était de pouvoir créer un style pour les éléments non-matériels (tels que les DIV standard, les SPAN, etc.) avec des couleurs différentes en fonction du thème de matériau actuellement appliqué. Il a fallu une combinaison d'éléments Matériau 2 et Angulaire 2 pour que tout fonctionne.
Voici ce que j'ai fait: Mon fichier de thème personnalisé ressemble à ceci:
@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);
}
Un extrait de mon fichier scss d'application:
@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);
}
Dans mon service "à thème" (bien que vous puissiez le faire dans n'importe quel service, tant qu'il est disponible globalement, ou du moins partout où vous en avez besoin), j'ai défini une simple variable booléenne isDarkTheme
. J'utilise cela pour contrôler l'affichage en fonction du choix du thème "sombre" par l'utilisateur.
Ensuite, chaque fois que j'en ai besoin, j'utilise ngClass pour appliquer des classes de manière dynamique, en fonction de la valeur de la variable globale isDarkTheme
:
<div [ngClass]="{'light-colors' : !svc.isDarkTheme,'dark-colors' : svc.isDarkTheme}">
...my content...
</div>
J'ai un div qui enveloppe toute mon application en utilisant la même approche ngClass
pour appliquer la classe darkTheme
ou non, en fonction de la valeur de la variable isDarkTheme
. Ceci s’occupe de tous les éléments sensibles à la matière de l’ensemble de mon application en une seule fois, et j’utilise simplement les light-colors
et dark-colors
pour les éléments non matériels spécifiques où j’ai besoin. Je pourrais probablement les combiner, mais pour l'instant je laisse les choses en l'état.
Pour être complet, voici la liste des éléments que vous pouvez obtenir des différentes palettes: Dans la palette "primaire" ($primary
et $dark-p
dans mon code ci-dessus):
Vous pouvez également obtenir ces trois mêmes valeurs de couleur pour les palettes $accent
et $warn
.
De la palette "au premier plan" ($light-foreground-palette
et $dark-foreground-palette
dans mon code ci-dessus):
Dans la palette "arrière-plan" ($light-background-palette
et $dark-background-palette
dans mon code ci-dessus):
Voici les sources que j'ai utilisées pour rassembler cela:
J'admettrai volontiers de ne comprendre qu'environ 80% de ce qui se passe ici, alors s'il y a une meilleure façon, faites-le-moi savoir ...
Je sais que c'est très tard pour la fête, mais je ne voulais pas tirer un DenverCoder9 après avoir enfin trouvé une façon propre de le faire.
Premièrement, allez à ce lien sur le github angular material2 et déterminez les palettes de couleurs utilisées par votre thème. (Ce lien pointe vers la version 6, alors assurez-vous de changer la balise pour la version que vous utilisez.)
Créez ensuite un fichier variables.scss
dans votre projet quelque part pour stocker les références de palette de votre thème (l'exemple ci-dessous utilise les palettes du thème Rose indigo):
/* variables.scss */
@import "~@angular/material/theming";
$primaryPalette: mat-palette($mat-Indigo);
$accentPalette: mat-palette($mat-pink, A200, A100, A400);
// the default warn palette is red, so use that if the theme doesn't define one
$warnPalette: mat-palette($mat-red);
Vous pouvez ensuite inclure le fichier variables.scss
dans vos feuilles de style et utiliser mat-color(<palette>)
pour obtenir la couleur de vos classes.
/* my-component.scss */
@import "~@angular/material/theming";
@import 'variables.scss';
.my-primary-text {
color: mat-color($primaryPalette);
}
.my-accent-text {
color: mat-color($accentPalette);
}
En utilisant cette méthode, vous pouvez toujours utiliser les thèmes prédéfinis. Il serait probablement encore plus propre de recréer le thème à l'aide de la documentation publiée, mais pour le moment, cela me convient.
Espérons que cela évite au prochain gars beaucoup de souffrances et de souffrances sur la route.
Alors, qui sait quand un matériau angulaire peut changer les couleurs de leurs thèmes, il est donc probablement judicieux de recréer les valeurs par défaut.
En vous appuyant sur la partie précédente de l'article, ajoutez les mixins mat-light-theme
/mat-dark-theme
pour redéfinir le nouveau thème.
/* variables.scss */
@import "~@angular/material/theming";
$primaryPalette: mat-palette($mat-Indigo);
$accentPalette: mat-palette($mat-pink, A200, A100, A400);
// the default warn palette is red, so use that if the theme doesn't define one
$warnPalette: mat-palette($mat-red);
// re-define the Indigo-pink theme
$myDefaultTheme: mat-light-theme($primaryDefault, $accentDefault, $warnDefault);
Puis dans votre racine principale styles.scss
pour votre application,
/* styles.scss */
@import '~@angular/material/theming';
@import './scss/variables.scss';
@include angular-material-theme($defaultTheme);
Assurez-vous de laisser le <link href=>
dans votre index.html
pour la feuille de style par défaut.
Génial! Maintenant, si vous mettez à jour le matériau angulaire et qu'ils ont changé les couleurs, votre bien !, Et vous pouvez mettre à jour les couleurs dans l'application en les épongeant avec les palettes dans variables.scss
.
Vous pouvez utiliser class="mat-primary"
et class="mat-accent"
sur des éléments HTML pour obtenir les couleurs primaires et d'accent de votre thème.