Come posso utilizzare le tavolozze dei temi personalizzati in Angular?


98

Voglio usare i colori del marchio della mia azienda in tutta l'app.

Ho trovato questo problema: AngularJS 2 - Material design - imposta la tavolozza dei colori in cui posso creare un tema presumibilmente personalizzato , ma fondamentalmente utilizza solo parti diverse di tavolozze predefinite. Non voglio usare i colori predefiniti di Material2. Voglio i colori del mio marchio unici e speciali. Esiste un modo migliore (più giusto?) Per creare il mio tema, piuttosto che modificarlo _palette.scss?

Devo creare un mixin per la tavolozza del mio marchio? In caso affermativo, qualche guida su come farlo correttamente? Qual è il significato delle diverse sfumature di colore (contrassegnate da numeri come: 50, 100, 200, A100, A200 ...)?

Qualsiasi informazione su quest'area sarà molto apprezzata!



@anshuVersatile Grazie per l'input! Ora capisco la cosa della numerazione. Molto apprezzato :-)
Narxx

Risposte:


247

Dopo alcune ricerche ho concluso con questa conclusione che mi ha risolto, spero che possa aiutare anche te.

Passaggio 1: crea le tue tavolozze dai colori del marchio.

Ho trovato questo fantastico sito Web in cui inserisci il colore del tuo marchio e crea una tavolozza completa con le diverse sfumature di quel colore del marchio: http://mcg.mbitson.com

Ho usato questo strumento sia per il mio primarycolore (che è il colore del mio marchio) che per il accentcolore.

Passaggio 2: crea le tavolozze nel file del tema personalizzato

ecco una guida su come creare tale .scssfile: 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);

Qualche spiegazione sul codice sopra

I numeri sul lato sinistro impostano il "livello" di luminosità. L'impostazione predefinita è 500 (che è la vera tonalità del colore / accento del mio marchio). Quindi in questo esempio, il colore del mio marchio è #5282c1. Il resto sono altre sfumature di quel colore (dove numeri più bassi significano tonalità più luminose e numeri più alti significano tonalità più scure). Ci AXXXsono diverse tonalità. Non sono (ancora) sicuro di dove siano in uso. Ancora una volta, un numero più basso significa più luminoso e un numero più alto significa più scuro.

L' contrastimposta il colore del carattere su quelle colori di sfondo. È molto difficile (o addirittura impossibile) calcolare tramite CSS dove il carattere deve essere luminoso (bianco) o scuro (nero con 0,87 opacità) quindi è facilmente leggibile anche a persone daltoniche. Quindi questo è impostato manualmente e hardcoded nella definizione della tavolozza. Lo ottieni anche dal generatore di palette che ho collegato sopra (anche se viene emesso nel vecchio formato Material1, e dovrai convertirlo manualmente nel formato Material2 come ho postato qui).

Imposta il tema per utilizzare la tavolozza dei primarycolori del marchio come colore e tutto ciò che hai per l'accento come accentcolore.

Passaggio 3: usa il tema in tutta l'app dove puoi

Alcuni elementi possono prendere i colori del tema, come <md-toolbar>, <md-input>, <md-button>, <md-select>e così via. Lo useranno primaryper impostazione predefinita, quindi assicurati di impostare la tavolozza dei colori del marchio come primaria. Se vuoi cambiare il colore, usa la colordirettiva (è una direttiva angolare?).

Per esempio:

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


Nel mio caso avevo utilizzato un generatore di temi di terze parti e ha omesso i simboli hash sui codici colore esadecimali. Inoltre racchiudeva ogni chiave e valore con virgolette singole, ma non sono sicuro che fosse un problema. L'aggiunta degli hash ha risolto il mio problema di compilazione.
Isherwood il

1
Sì, l'ho appena provato e ha funzionato. L'unica cosa che è cambiata è la parte delle importazioni. Non hai bisogno di variabili e @import '~@angular/material/theming'; @include mat-core();
importi

1
Guarda questo articolo, è molto bravo a spiegare come funziona il tutto blog
Martin Andersen

1
@TrevorGoodchild ad essere onesti, abbiamo deprecato il nostro progetto Angular e lo abbiamo scritto da zero usando VueJS, quindi non ricordo nemmeno come abbiamo finito per definire il nostro tema in Angular :) Prova ad aggiungere più variabili di colore e aggiungile tutte alla funzione mat-light-theme.
Narxx

1
@Narxx Secondo la seguente risposta, i valori AXXX sono per pulsanti di azione fluttuanti ed elementi interattivi con la "A" che sta per "Accent". graphicdesign.stackexchange.com/a/69470
Trevor Karjanis

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.