web-dev-qa-db-fra.com

Comment changer la couleur de police de la palette principale dans Angular Material2?

Dans la documentation officielle thématisation de Angular Material2 , il indique clairement ce qui suit:

Dans Angular Material, un thème est créé en composant plusieurs palettes. En particulier, un thème se compose de:

  • Une palette principale: les couleurs les plus utilisées sur tous les écrans et composants.
  • Une palette d'accents: couleurs utilisées pour le bouton d'action flottant et les éléments interactifs.
  • Une palette d'avertissement: couleurs utilisées pour transmettre l'état d'erreur.
  • Une palette de premier plan: couleurs pour le texte et les icônes.
  • Une palette d'arrière-plan: couleurs utilisées pour les arrière-plans des éléments.

Mais dans chaque exemple, ils ne modifient que les trois premiers:

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-Indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);

Ma question est donc la suivante: comment changer la palette de premier plan pour changer la couleur du texte de la palette principale ou secondaire?

Il existe des sites Web ( materialpalette.com , material.io ) qui montrent la palette de couleurs pour une visualisation facile, mais ils ne disent toujours pas comment inclure ou modifier cette palette dans Angular Material2.

cssfontsangular-material2textcolor
12
CodeArtist

Vous pouvez modifier la couleur du thème par défaut en créant votre propre carte de premier plan et la fusionner dans le thème créé avant de l'initialiser. Voici comment:

  1. Créez l'objet thème comme d'habitude.

    @import '@angular/material/theming.scss';
@include mat-core();

// Choose colors
$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-light-green);
$my-app-warn:    mat-palette($mat-red);

// Build theme object (its practically a map object)
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

  2. Créez votre premier plan personnalisé à l'aide d'une fonction personnalisée renvoyant une carte de premier plan telle que définie dans la fonction @angular/material/_theming.scss -> $mat-light-theme-foreground.
    Vous pouvez jouer avec la carte et définir uniquement les champs souhaités et laisser les autres par défaut.

    @function my-mat-light-theme-foreground($color) {
    @return (
        base:              $color,
        divider:           $black-12-opacity,
        dividers:          $black-12-opacity,
        disabled:          rgba($color, 0.38),
        disabled-button:   rgba($color, 0.38),
        disabled-text:     rgba($color, 0.38),
        hint-text:         rgba($color, 0.38),
        secondary-text:    rgba($color, 0.54),
        icon:              rgba($color, 0.54),
        icons:             rgba($color, 0.54),
        text:              rgba($color, 0.87),
        slider-off:        rgba($color, 0.26),
        slider-off-active: rgba($color, 0.38),
    );
};

// You can put any color here. I've chosen mat-color($my-app-primary, 700)
$my-foreground: my-mat-light-theme-foreground(mat-color($my-app-primary, 700));

  3. Fusionnez le thème créé précédemment avec uniquement la carte de premier plan et initialisez votre thème personnalisé.
    Remarque: Puisque toutes les cartes dans SCSS sont immuables, la map-merge() retourne une nouvelle instance de carte et NE MODIFIE PAS la carte en place - nous avons donc une autre variable $my-app-theme-custom Pour contenir le thème du résultat.

    $my-app-theme-custom: map-merge($my-app-theme, (foreground: $my-foreground));

// Include your custom theme.
@include angular-material-theme($my-app-theme-custom);

Remarque: J'utilise Angular Material v2.0.0-beta.8

18
nyxz

Le guide est disponible sur le site de documentation situé ici .

Tout d'abord, vous définissez les palettes de votre thème, telles que $primary, $accent, $warn (dans le guide, ils ont $candy-app- préfixe), puis créez un $theme objet:

// Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);

Une fois que nous avons un thème qui contient toutes les palettes, nous pouvons en obtenir une palette de premier plan:

$foreground: map-get($theme, foreground);

De $foreground palette, nous pouvons obtenir toutes les valeurs basées sur une clé, telles que

secondary-text: rgba(black, 0.54),

ou

text: rgba(black, 0.87)

Voici le code pour récupérer le secondary-text propriété:

color: mat-color($foreground, secondary-text);

Je suis passé à 2.0.0-beta.3 de 2.0.0-beta.2 et la structure des dossiers est différente, vous avez raison. C'est maintenant \node_modules\@angular\material\_theming.scss, _palette.scssle fichier a disparu. Vous pouvez cependant le rechercher globalement: '$ mat-dark-theme-background: ('

_theming.scss a toutes les couleurs, les cartes et toutes les fonctions, comme mat-color

4
Wladimir

Voici le code:

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:            black,
  divider:         rgba(black, 0.12),
  dividers:        rgba(black, 0.12),
  disabled:        rgba(black, 0.38),
  disabled-button: rgba(black, 0.38),
  disabled-text:   rgba(black, 0.38),
  hint-text:       rgba(black, 0.38),
  secondary-text:  rgba(black, 0.54),
  icon:            rgba(black, 0.54),
  icons:           rgba(black, 0.54),
  text:            rgba(black, 0.87)
);

Vous pouvez trouver la carte à:\node_modules\@angular\material\core\theming\_palette.scss

Exemple de récupération de 'texte secondaire':

$foreground: map-get($theme, foreground);

.foreground-color {
  color: mat-color($foreground, secondary-text);
}
1
Wladimir