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

Question

Je veux 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 la palette de couleurs où je peux construire un prétendument personnalisé mais il s'agit essentiellement d'utiliser différentes parties de palettes préétablies. Je ne veux pas utiliser les couleurs prédéfinies de Material2. Je veux mes couleurs de marque uniques et spéciales. Existe-t-il un meilleur moyen (plus juste ?) de créer mon propre thème que de simplement bidouiller avec des palettes prédéfinies ? _palette.scss ?

Dois-je créer un mixin pour la palette de ma marque ? Dans l'affirmative, existe-t-il des guides sur la manière 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 cette région sera très appréciée !

Answer 1

Après quelques recherches, j'ai abouti à cette conclusion qui a résolu le problème pour moi, j'espère qu'elle vous aidera aussi.

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

J'ai trouvé ce site 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 : http://mcg.mbitson.com

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

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

Voici un guide pour la création d'un tel système .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 (ce qui correspond à la véritable nuance de la couleur de ma marque/couleur d'accent). Ainsi, dans cet exemple, la couleur de ma marque est #5282c1 . Les autres sont des nuances de cette couleur (les chiffres les plus bas correspondent à des nuances plus claires et les chiffres les plus élevés à des nuances plus foncées). Le site AXXX sont des teintes différentes. Je ne sais pas (encore) où elles sont utilisées. Encore une fois, un chiffre plus bas signifie plus clair et un chiffre plus haut signifie plus foncé.

Le site contrast définit la couleur de la police sur ces couleurs de fond. Il est très difficile (voire impossible) de calculer via les CSS où la police doit être claire (blanche) ou foncée (noire avec une opacité de 0,87) afin qu'elle soit facilement lisible, même pour les daltoniens. Ces paramètres sont donc définis manuellement et codés en dur dans la définition de la palette. Le générateur de palette dont j'ai donné le lien ci-dessus fournit également ces informations (bien qu'elles soient générées dans l'ancien format Material1, et que vous deviez les convertir manuellement au format Material2 comme je l'ai indiqué ici).

Configurer le thème pour utiliser la palette de couleurs de la marque comme le primary couleur, et tout ce que vous avez comme accent comme votre accent couleur.

Étape 3 : Utilisez le thème dans l'ensemble de 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 primary par défaut, assurez-vous donc de définir la palette de couleurs de la marque comme primaire. Si vous souhaitez modifier la couleur, utilisez la fonction color (s'agit-il d'une directive Angular ?).

Par exemple :

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

Answer 2

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

Answer 3

Avec Angular Material v12, un thème matériel ressemble à ceci et doit être importé par styles.scss

@use '~@angular/material' as mat;
@import './custom-palettes';

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat.define-palette(mat.$gray-palette, 900, 800, 900);
$candy-app-accent: mat.define-palette(mat.$green-palette, 900, 800, 900);
$candy-app-warn: mat.define-palette($wfs-blue-palette, 800, 700, 900);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-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($candy-app-theme);

./custom-palettes ressemble à ça :

// see http://mcg.mbitson.com

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

$wfs-blue-palette: (
  50: #eaeef3,
  100: #cad6e0,
  200: #a7bacc,
  300: #849eb7,
  400: #698aa7,
  500: #4f7598,
  600: #486d90,
  700: #3f6285,
  800: #36587b,
  900: #26456a,
  A100: #add1ff,
  A200: #7ab5ff,
  A400: #4798ff,
  A700: #2e8aff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

Comme pour la première réponse, http://mcg.mbitson.com est utilisé pour générer les couleurs.