Après quelques recherches, je me suis retrouvé avec cette conclusion qui l'a résolu pour moi, j'espère que cela vous aidera aussi.
Étape 1: Créez vos propres palettes à partir de couleurs de marque.
J'ai trouvé ce site Web génial où vous entrez la couleur de votre marque, et il crée une palette complète avec les différentes nuances de cette couleur de marque: http://mcg.mbitson.com
J'ai utilisé cet outil pour ma primary
couleur (qui est la couleur de ma marque) et la accent
couleur.
Étape 2: Créez des palettes dans votre fichier de thème personnalisé
voici un guide pour créer un tel .scss
fichier: https://github.com/angular/material2/blob/master/guides/theming.md
@import '~@angular/material/theming';
// Be sure that you only ever include 'mat-core' mixin once!
// it should not be included for each theme.
@include mat-core();
// define a real custom palette (using http://mcg.mbitson.com)
$bv-brand: (
50: #ffffff,
100: #dde6f3,
200: #b4c9e4,
300: #7fa3d1,
400: #6992c9,
500: #5282c1,
600: #4072b4,
700: #38649d,
800: #305687,
900: #284770,
A100: #ffffff,
A200: #dde6f3,
A400: #6992c9,
A700: #38649d,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white,
)
);
$bv-orange: (
50: #ffffff,
100: #fff7f4,
200: #fecdbd,
300: #fc9977,
400: #fc8259,
500: #fb6c3b,
600: #fa551d,
700: #f44205,
800: #d63a04,
900: #b83204,
A100: #ffffff,
A200: #fff7f4,
A400: #fc8259,
A700: #f44205,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white,
)
);
// mandatory stuff for theming
$bv-palette-primary: mat-palette($bv-brand);
$bv-palette-accent: mat-palette($bv-orange);
// include the custom theme components into a theme object
$bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent);
// include the custom theme object into the angular material theme
@include angular-material-theme($bv-theme);
Quelques explications sur le code ci-dessus
Les chiffres sur le côté gauche définissent le «niveau» de luminosité. La valeur par défaut est 500 (qui est la vraie nuance de la couleur de ma marque / couleur d'accentuation). Donc, dans cet exemple, la couleur de ma marque est #5282c1
. Le reste sont d'autres nuances de cette couleur (où les nombres inférieurs signifient des nuances plus claires et les nombres plus élevés signifient des nuances plus foncées). Les AXXX
nuances sont différentes. Je ne sais pas (encore) où ils sont utilisés. Encore une fois, un nombre inférieur signifie plus clair et un nombre plus élevé signifie plus sombre.
La contrast
règle la couleur de la police sur les couleurs de fond. Il est très difficile (voire impossible) de calculer via CSS où la police doit être claire (blanche) ou sombre (noire avec une opacité de 0,87), elle est donc facilement lisible même pour les personnes daltoniennes. Ceci est donc défini manuellement et codé en dur dans la définition de la palette. Vous obtenez également cela à partir du générateur de palette que j'ai lié ci-dessus (bien qu'il soit sorti dans l'ancien format Material1, et vous devrez le convertir manuellement au format Material2 comme je l'ai publié ici).
Définissez le thème pour utiliser la palette de couleurs de la marque comme primary
couleur et tout ce que vous avez pour accentuer comme accent
couleur.
Étape 3: utilisez le thème dans toute l'application partout où vous le pouvez
Certains éléments peuvent prendre les couleurs, comme thème <md-toolbar>
, <md-input>
, <md-button>
, <md-select>
et ainsi de suite. Ils l'utiliseront primary
par défaut, alors assurez-vous de définir la palette de couleurs de la marque comme principale. Si vous voulez changer la couleur, utilisez la color
directive (est-ce une directive angulaire?).
Par exemple:
<button mat-raised-button color="accent" type="submit">Login</button>