web-dev-qa-db-fra.com

Comment utiliser des palettes de thèmes personnalisées dans Angular?

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

J'ai trouvé ce problème: AngularJS 2 - Conception du matériau - Palette de couleurs définie où je peux créer un thème prétendument personnalisé , mais il s'agit essentiellement d'utiliser différentes parties de palettes prédéfinies. Je ne veux pas utiliser les couleurs prédéfinies de Material2. Je veux mes couleurs uniques et spéciales. Existe-t-il un meilleur moyen (plus juste?) De créer mon propre thème que de simplement bidouiller avec _palette.scss?

Dois-je faire un mix pour la palette de ma marque? Si oui - des guides sur la façon de le faire correctement? Quelles sont les significations des différentes nuances de couleurs (marquées par des nombres tels que: 50, 100, 200, A100, A200 ...)?

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

angularsassmaterial-designangular-material2
60
Narxx

Après quelques recherches, je me suis retrouvé avec cette conclusion qui l’a résolue pour moi, espérons que cela vous aidera aussi.

Étape 1: Créez vos propres palettes à partir de couleurs de marque.

Vous avez trouvé ce site Web génial sur lequel vous entrez la couleur de votre marque, ce qui crée une palette complète avec les différentes nuances de cette couleur: http://mcg.mbitson.com

J'ai utilisé cet outil à la fois pour ma couleur primary (qui est la couleur de ma marque) et pour ma couleur accent.

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

voici un guide pour créer ce fichier .scss: 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'accent). Donc, dans cet exemple, la couleur de ma marque est #5282c1. Le reste est constitué d'autres nuances de cette couleur (les chiffres inférieurs désignant les nuances plus claires et les chiffres élevés, les nuances plus foncées). Les AXXX sont de différentes nuances. Pas sûr (encore) où ils sont utilisés. Encore une fois, un nombre inférieur signifie plus lumineux et un nombre élevé signifie plus sombre.

Le contrast définit la couleur de la police par rapport à ces couleurs d'arrière-plan. Il est très difficile (voire impossible) de calculer via CSS où la police de caractères doit être brillante (blanche) ou sombre (noire avec une opacité de 0,87), de sorte qu'elle est facilement lisible même par les personnes daltoniennes. Donc, ceci est défini manuellement et codé en dur dans la définition de la palette. Vous l'obtenez également à partir du générateur de palette que j'ai lié ci-dessus (bien qu'il soit édité dans l'ancien format Material1, vous devrez le convertir manuellement au format Material2 comme je l'ai signalé ici).

Définissez le thème pour utiliser la palette de couleurs de la marque en tant que couleur primary et pour tout ce que vous avez pour accentuer votre couleur accent.

Étape 3: utilisez le thème dans l'application partout où vous le pouvez

Certains éléments peuvent prendre les couleurs du thème, comme <md-toolbar>, <md-input>, <md-button>, <md-select> Et ainsi de suite. Ils utiliseront par défaut primary, alors assurez-vous de définir la palette de couleurs de la marque comme principale. Si vous voulez changer la couleur, utilisez la directive color (est-ce une directive Angular angulaire?)?).

Par exemple:

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

166
Narxx