Thème personnaliser avec Angular Material

By | 3 janvier 2022

Angular Material est une formidable bibliothèque de composants pour Angular. Une des fonctionnalités que j’apprécie est de pouvoir facilement changer les couleurs utilisées sur l’ensemble des composants. Aujourd’hui, nous allons parler des différents moyens de réaliser cela et notamment comment utiliser n’importe quelle couleur comme base de notre thème.

Thème pré-configuré

Angular Material est fourni avec 4 thèmes de couleur pré-construits.

  • deep-purple, amber, red
  • indigo, pink, red
  • pink, bluegrey, red
  • purple, green, red

Pour sélectionner un thème, il suffit d’importer la feuille de style correspondant dans le fichier angular.json.

"styles": [
  "src/styles.css",
  "@angular/material/deeppurple-amber.css"
]

Thème personnalisé avec couleur Material

Angular Materiel permet de personnaliser simplement son thème en choisissant parmi une gamme couleur « material » disponible ici : https://material.io/resources/color . Lors de l’ajout de d’angular material via le schematics ng add @angular/material, il suffit de sélectionner l’option custom theme pour générer un fichier custom-theme.scss.

Pour définir une couleur, il suffit de modifier le fichier custom-theme.scss comme ceci :

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The "warn" palette is optional and defaults to red if not specified.
$my-warn: mat.define-palette(mat.$red-palette);

Thème personnalisé avec n’importe quelles couleurs

Si vous ne souhaitez pas utiliser une des couleurs proposé par material, vous devez créer vous-même votre propre palette de couleur. Comme cela peut-être fastidieux, voici des outils pour vous aider.

Une fois la palette générée, il suffit de l’inclure dans le fichier custom-theme.scss

$md-custom: (
  50 : #e4e4e7,
  100 : #bcbcc4,
  200 : #8f909d,
  300 : #626375,
  400 : #414158,
  500 : #1f203a,
  600 : #1b1c34,
  700 : #17182c,
  800 : #121325,
  900 : #0a0b18,
  A100 : #5a6bff,
  A200 : #273dff,
  A400 : #0018f3,
  A700 : #0016da,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #ffffff,
    400 : #ffffff,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #ffffff,
    A200 : #ffffff,
    A400 : #ffffff,
    A700 : #ffffff,
  )
);

$md-custom-accent: (
  50 : #f2f2ee,
  100 : #dfdfd6,
  200 : #cac9ba,
  300 : #b5b39e,
  400 : #a5a38a,
  500 : #959375,
  600 : #8d8b6d,
  700 : #828062,
  800 : #787658,
  900 : #676445,
  A100 : #fffac3,
  A200 : #fff590,
  A400 : #fff15d,
  A700 : #ffee44,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #000000,
    600 : #000000,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);


$custom-primary: mat.define-palette($md-custom);
$custom-accent: mat.define-palette($md-custom-accent);

// The warn palette is optional (defaults to red).
$custom-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($sylnadecor-theme);

Conclusion

Angular material est très flexible et complet. Il s’agit d’un excellent outil pour créer rapidement des interfaces avec Angular. La personnalisation des couleurs s’applique automatiquement à l’ensemble des composants.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.