Comment obtenir de primaire ou de la couleur d'accent de actuellement appliqué thème angulaire des matériaux 2

Je suis en train de construire une application avec plusieurs thème angulaire de la conception des matériaux 2. J'ai créé plusieurs thème, et ça fonctionne vraiment génial.
À l'aide de cette directive : Angulaire de la conception des Matériaux thème

Mais le problème est que si l'utilisateur sélectionne "thème vert" par exemple. Alors je veux afficher son nom en vert et ainsi de. Mais comment puis-je obtenir actuellement sélectionné thème dans ce cas, "vert" dans mon style de composant et ensuite utiliser cette variable primaire dans mon nom d'utilisateur de la classe pour changer sa couleur

avez-vous vu ce, Thématisation des composants personnalisés.
oui je l'ai vu. mais cela n'a pas fonctionné pour moi ou je n'ai pas le comprendre correctement. c'est pourquoi je suis venu ici
Pouvez-vous montrer ce que vous avez déjà essayé?
J'ai essayé d'ajouter un thème différent disons que dans ce cas.. Indigo and green C'est vraiment génial de travailler sur tout le matériel de conception spécifique des trucs . Comme le bouton , interrupteur à bascule , etc carte. Mais je veux changer <h1> texte à partir de mon appli thème actuel. comme si l'utilisateur choisi thème vert puis h1 texte doit changer de couleur de vert et ainsi de suite..
C'est le post où j'ai eu ma réponse bien expliqué. Wow 🙂 https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1

OriginalL'auteur Rahul | 2017-07-13

  1. 24

    Je ne suis pas sûr si c'est la "bonne" façon de le faire, mais ça marche, donc je suis avec elle pour l'instant. Je vais adapter si il ya une meilleure façon. Mon objectif était d'être en mesure de style non-éléments (tels que le niveau de la Vrd, Espaces, etc) avec des couleurs différentes selon le type de Matériau de thème est appliqué actuellement. Il a fallu une combinaison de l'article 2 et d'angle 2 éléments pour les faire fonctionner.

    Voici ce que j'ai fait:
    Mon thème personnalisé fichier 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 application scss fichier:

    @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 "thème" service " (bien que vous pourriez le faire dans un service, aussi longtemps qu'il est disponible à l'échelle mondiale, ou au moins n'importe où vous en avez besoin), j'ai défini une simple variable booléenne isDarkTheme. - Je l'utiliser pour contrôler l'affichage selon que l'utilisateur a sélectionné le "dark" thème.

    Alors où j'en ai besoin j'utilise ngClass pour appliquer les classes dynamiquement, en fonction de la valeur de la global isDarkTheme variable:

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

    J'ai un div emballage de l'ensemble de mon application en utilisant le même ngClass approche d'appliquer la darkTheme classe ou non selon la valeur de la isDarkTheme variable. Cette prendre soin de tout le Matériel-connaissance des éléments dans mon ensemble de l'application d'un seul coup, et je viens d'utiliser le light-colors et dark-colors sur la non-éléments où j'en ai besoin. Je pourrais probablement combiner ces, mais pour l'instant je suis en laissant les choses en l'état.

    Pour être complet, voici la liste des éléments que vous pouvez obtenir à partir de différentes palettes:
    De la "primaire" de la palette ($primary et $dark-p dans mon code ci-dessus):

    • par défaut
    • plus léger
    • plus sombre

    Vous pouvez également obtenir ces trois mêmes valeurs de couleur pour la $accent et $warn palettes.

    De "l'avant-plan de la palette" ($light-foreground-palette et $dark-foreground-palette dans mon code ci-dessus):

    • base
    • diviseur
    • diviseurs
    • désactivé
    • désactivé bouton
    • handicapés-texte
    • soupçon de texte
    • secondaire-texte
    • icône
    • icônes
    • texte
    • curseur-off
    • curseur-off-active

    De le "fond" de la palette ($light-background-palette et $dark-background-palette dans mon code ci-dessus):

    • la barre d'état
    • app-bar
    • fond
    • passez
    • carte
    • dialogue
    • désactivé bouton
    • soulevées bouton
    • focalisés sur le bouton
    • sélectionné bouton
    • sélectionné-désactivé bouton
    • handicapés-bouton-bascule

    Voici les sources que j'ai utilisé pour mettre cela ensemble:

    Je vais reconnaissent seulement la compréhension environ 80% de ce qui se passe ici, donc, si il ya une meilleure façon, s'il vous plaît laissez-moi savoir...

    J'ai également eu à importer @import '~@angular/material/theming'; dans le composant fichier scss

    OriginalL'auteur TimTheEnchanter

  2. 8

    Je sais que c'est super en retard à la fête, mais ne voulait pas tirer un DenverCoder9 après avoir enfin trouver un moyen propre de faire cela.

    D'abord, aller à ce lien sur l'angle de material2 github et comprendre ce que les palettes de couleurs de votre thème. (Que le lien pointe vers la version 6, alors assurez-vous de changer la balise quelle que soit la version que vous utilisez.)

    Puis créer un variables.scss fichier dans votre projet d'un endroit pour stocker la palette des références de votre thème (l'exemple ci-dessous utilise les palettes pour l'indigo rose 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);

    Vous pouvez ensuite inclure le variables.scss fichier dans votre feuille de style et l'utilisation mat-color(<palette>) pour obtenir la couleur pour vous 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 la pré-construit des thèmes. Il serait probablement encore plus propre juste pour re-créer le thème à l'aide de leur documentation publiée, mais pour l'instant je suis heureux avec cela.

    Je l'espère, qui enregistre le gars à côté, beaucoup de douleur et de souffrance en bas de la route.

    Mise à JOUR: Redéfinir le Thème par Défaut pour Éviter OhGodTheyChangedColorsThisRelease

    Alors, qui sait quand angulaire de matériel pourraient changer leurs couleurs de thème, de sorte que c'est probablement une bonne idée de simplement re-créer de la valeur par défaut.

    Ainsi, la construction sur la partie précédente de ce post, ajouter le mat-light-theme/mat-dark-theme mixin pour re-dé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 maîtrise de la racine styles.scss pour votre application,

    /* styles.scss */
@import '~@angular/material/theming';
@import './scss/variables.scss';

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

    Assurez-vous de déposer le <link href=> dans votre index.html pour la feuille de style par défaut.

    Grand! Maintenant, si vous mettez à jour angulaire de matériel et ils ont changé les couleurs, votre bon!!!, Et vous pouvez mettre à jour les couleurs dans l'application avec juste coucher avec les palettes dans variables.scss.

    Dans le cas où vous souhaitez utiliser la même couleur dans une palette (par exemple, couleur primaire), en plusieurs endroits, et que vous voulez prendre avantage de css personnalisé propriétés (variables), n'oubliez pas d'utiliser le sass interpolation syntaxe: --primary-color: #{mat-color($primaryPalette)};

    OriginalL'auteur tazer84

  3. 1

    Vous pouvez utiliser class="mat-primary" et class="mat-accent" sur des éléments HTML pour obtenir le primaire et les accents de couleurs de votre thème.

    Il travaille dans la conception de matériel de l'élément de bouton "like", etc. c'est une sorte de suppléant de [couleur] attr. mais Cela ne fonctionne pas sur n'importe quel élément html <h3 class="mat-primary">Lorem ipsum dolor sit amet.</h3> c'est de ne pas changer <h3> couleur. est-il possible que je peux tout simplement avoir de la couleur dans mon css et style pour par exemple.. h3{ color : @mat-primary; } Comme ceci
    je suis également à la recherche de réponse à cette question. je veux mettre l'onglet sélectionné la couleur sur ma page principale couleur de thème actuel. moins de code . ainsi, lorsque l'utilisateur change de thème . je n'ai plus rien à faire

    OriginalL'auteur Niels Meima