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.
- https://material.io/design/color/the-color-system.html#tools-for-picking-colors : Permet de générer une palette à partir d’une couleur
- http://mcg.mbitson.com/#!?mcgpalette0=%23959375&themename=mcgtheme : Permet également de générer une palette mais aussi de générer le code scss de cette dernière.
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.