Come posso utilizzare le tavolozze dei temi personalizzati in Angular?

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!

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>

Prova a utilizzare il sito Web sottostante, sembra facile personalizzare i temi angolari. https://materialtheme.arcsine.dev/