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


98

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!



@anshuVersatile Merci pour votre contribution! Je comprends maintenant la numérotation. Très apprécié :-)
Narxx

Réponses:


247

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>


Dans mon cas, j'avais utilisé un générateur de thème tiers et il a omis les symboles de hachage sur les codes de couleur hexadécimaux. Il a également enveloppé chaque clé et valeur avec des guillemets simples, mais je ne suis pas sûr que ce soit un problème. L'ajout des hachages a résolu mon problème de compilation.
isherwood

1
Oui, je viens d'essayer et cela a fonctionné. La seule chose qui a changé est la partie importations. Vous n'avez pas besoin de variables et vous importez / incluez uniquement des fichiers de thème de matériel comme celui-ci: @import '~@angular/material/theming'; @include mat-core();
flackjap

1
Regardez cet article, il est très bon pour expliquer comment tout cela fonctionne blog.thoughtram.io/angular/2017/05/23/...~~V~~plural~~3rd
Martin Andersen

1
@TrevorGoodchild pour être honnête, nous avons désapprouvé notre projet Angular et l'avons écrit à partir de zéro en utilisant VueJS, donc je ne me souviens même pas comment nous avons fini par définir notre thème dans Angular :) Essayez simplement d'ajouter plus de variables de couleur, et ajoutez-les toutes à la fonction mat-light-theme.
Narxx

1
@Narxx Selon la réponse suivante, les valeurs AXXX sont pour les boutons d'action flottants et les éléments interactifs avec le «A» pour «Accent». graphicdesign.stackexchange.com/a/69470
Trevor Karjanis

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.