Comment puis-je utiliser des palettes de thèmes personnalisés dans Angular?

Je souhaite utiliser les couleurs de la marque de mon entreprise dans toute l'application.

J'ai trouvé ce problème: AngularJS 2 - Material design - définir une palette de couleurs dans laquelle je peux créer un thème prétendument personnalisé , mais il s'agit essentiellement d'utiliser différentes parties de palettes pré-construites. Je ne veux pas utiliser les couleurs prédéfinies de Material2. Je veux mes couleurs de marque uniques et spéciales. Y a-t-il un meilleur moyen (plus juste?) De créer mon propre thème, que de simplement pirater avec _palette.scss?

Dois-je faire un mixin pour ma palette de marque? Si oui - des guides sur la façon de le faire correctement? Quelle est la signification des différentes nuances de couleurs (marquées par des chiffres comme: 50, 100, 200, A100, A200 ...)?

Toute information sur ce domaine sera très appréciée!

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 primarycouleur (qui est la couleur de ma marque) et la accentcouleur.

Étape 2: Créez des palettes dans votre fichier de thème personnalisé

voici un guide pour créer un tel .scssfichier: 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 AXXXnuances 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 contrastrè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 primarycouleur et tout ce que vous avez pour accentuer comme accentcouleur.

É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 primarypar 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 colordirective (est-ce une directive angulaire?).

Par exemple:

<button mat-raised-button color="accent" type="submit">Login</button>

Essayez d'utiliser le site Web ci-dessous, cela semble facile de personnaliser les thèmes angulaires. https://materialtheme.arcsine.dev/