web-dev-qa-db-fra.com

Comment obtenir la couleur primaire ou d'accentuation du thème actuellement appliqué dans un matériau angulaire 2

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

angularangular-material2
15
Rahul

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):

  • default
  • plus léger
  • plus sombre

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):

  • base 
  • diviseur 
  • diviseurs 
  • désactivée 
  • bouton désactivé 
  • texte désactivé 
  • texte d'aide 
  • texte secondaire 
  • icône 
  • des icônes 
  • texte 
  • slider-off 
  • slider-off-active

Dans la palette "arrière-plan" ($light-background-palette et $dark-background-palette dans mon code ci-dessus):

  • barre d'état
  • app-bar
  • contexte
  • flotter
  • carte
  • dialogue
  • bouton désactivé
  • bouton en relief
  • bouton focalisé
  • bouton sélectionné
  • bouton-désactivé-sélectionné
  • bouton-désactivé-bascule

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 ...

22
TimTheEnchanter

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.

MISE À JOUR: Redéfinir le thème par défaut pour prévenir OhGodTheyChangedColorsThisRelease

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.

7
tazer84

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.

0
Niels Meima