Comment puis-je utiliser le thème personnalisé palettes Angulaire?

Je veux utiliser ma société les couleurs de la marque tout au long de l'application.

J'ai trouvé cette question: AngularJS 2 - la conception de Matériel - définir la palette de couleurs où je peux construire une prétendument personnalisé thème, mais c'est simplement à l'aide de différentes parties de la pré-construit des palettes. Je ne veux pas utiliser Material2 de couleurs prédéfinies. Je veux que mon unique et spécial les couleurs de la marque. Est-il une meilleure façon (plus justes?) pour créer mon propre thème, que vient de pirater autour avec _palette.scss?

Je dois faire un mixin pour mon image de marque de la palette? 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 chiffres comme: 50, 100, 200, A100, A200...)?

Toutes les informations au sujet de cette zone sera très appréciée!

InformationsquelleAutor Narxx | 2017-01-03
  1. 187

    Après quelques recherches, j'ai fini avec cette conclusion qui résolu pour moi, j'espère qu'elle vous aidera aussi.

    Etape 1: Créer vos propres palettes à partir de l'image de marque des couleurs.

    Trouvé ce site génial où vous entrez votre couleur de la marque, et il crée une palette complète avec les différentes nuances de couleur de la marque: http://mcg.mbitson.com

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

    Etape 2: Créer des palettes dans votre thème personnalisé fichier

    ici est un guide sur la façon de créer de telles .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 numéros sur le côté gauche réglez le niveau de luminosité. La valeur par défaut est de 500 (qui est le vrai de l'ombre de ma couleur de la marque/couleur d'accent). Donc, dans cet exemple, ma couleur de la marque est #5282c1. Le reste sont d'autres nuances de cette couleur (où la baisse, les chiffres sont plus lumineuses nuances et les numéros les plus élevés signifient des teintes plus foncées). Le AXXX sont les différentes nuances. Pas sûr (encore) où elles sont en usage. De nouveau, un nombre inférieur signifie plus lumineux et le nombre plus élevé signifie plus sombre.

    La contrast définit la couleur de police sur ces couleurs d'arrière-plan. Il est très difficile (voire impossible) pour calculer via CSS où la police doit être brillant (blanc) ou foncé (noir 0,87 opacité) de sorte qu'il est facilement lisible même pour la couleur des personnes aveugles. C'est donc réglée manuellement et codées en dur dans la palette de définition. Vous obtenez ce générateur de palette je l'ai lié ci-dessus (même si c'est en cours de sortie dans le vieux Material1 format, et vous aurez à convertir manuellement ce Material2 format comme je l'ai posté ici).

    Définir le thème d'usage de la marque palette de couleurs comme le primary de couleur, et tout ce que vous avez pour l'accent de votre accent couleur.

    Etape 3: Utiliser le thème tout au long de l'application, où vous pouvez

    Certains éléments peuvent prendre les couleurs de thème, comme <md-toolbar>, <md-input>, <md-button>, <md-select> et ainsi de suite. Ils vont utiliser primary par défaut donc, assurez-vous de définir la marque de la palette de couleurs primaires. Si vous voulez changer la couleur, utilisez le color directive (est-il Angulaire de la directive?).

    Par exemple:

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

    • Dans mon cas, j'ai utilisé un tiers générateur de thème, et il a omis le hachage des symboles sur l'hex codes de couleur. Il a également enveloppé chaque clé et de la valeur avec des guillemets simples, mais je ne suis pas sûr que c'était un problème. En ajoutant les valeurs de hachage fixé mon problème de compilation.
    • Ma réponse est vieux. Il est possible que Material2 a légèrement changé depuis. Je n'ai pas mis à jour mon projet, donc je ne suis pas sûr si c'est la question...
    • C'est toujours d'actualité, bien que la all-theme importation syntaxe est obsolète.
    • Oui, j'ai juste essayé et cela a fonctionné. La seule chose qui a changé, c'est que les importations de la partie. Vous n'avez pas besoin de variables et vous n'import/inclure du matériel de la thématisation des fichiers comme ceci: @import '~@angular/material/theming'; @include mat-core();
    • Oh, oui, et le matériel mixin sont également à l'aide de tapis de préfixe, pas de md. Donc ce n'est pas md-palette, mais mat-palette, et ainsi de suite.
    • Ouais, ils ne cessent de changer la syntaxe de chaque maintenant et puis 🙂 Merci pour la mise à jour. Vous pouvez suggérer une correction de la réponse à faire de mise à jour si vous le souhaitez (je n'ai pas été le maintien de mon Angular2 projet pour un certain temps maintenant, et nous sommes de commutation pour Vue.js donc, je probablement ne pas mettre à jour mon code plus jamais...)
    • Regardez cet article, il est très bon pour expliquer comment tout cela fonctionne blog.thoughtram.io/angulaire/2017/05/23/...
    • C'est génial. Je sais je suis en retard à la fête, mais je suis de nouveau à la thématisation et je suis un peu confus sur la configuration de la palette. Notre entreprise a seulement huit couleurs que j'ai besoin d'utiliser. Dois-je créer une palette pour chaque couleur différente, ou tout simplement une entrée différente dans la même palette?
    • pour être honnête, nous avons obsolète Angulaire de notre projet et il a écrit à partir de zéro en utilisant VueJS donc je ne me souviens même plus comment nous nous sommes retrouvés la définition de notre thématisation dans Angulaire 🙂 Juste essayer d'ajouter plus de couleur variables, et tous les ajouter à mat-lumière-thème fonction.
    • comment venir à l'étape 1 n'est pas fourni par l'angle de matériel de thème?

    InformationsquelleAutor Narxx