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 primary
colore (che è il colore del mio marchio) che per il accent
colore.
Passaggio 2: crea le tavolozze nel file del tema personalizzato
ecco una guida su come creare tale .scss
file: 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 AXXX
sono 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' contrast
imposta 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 primary
colori del marchio come colore e tutto ciò che hai per l'accento come accent
colore.
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 primary
per impostazione predefinita, quindi assicurati di impostare la tavolozza dei colori del marchio come primaria. Se vuoi cambiare il colore, usa la color
direttiva (è una direttiva angolare?).
Per esempio:
<button mat-raised-button color="accent" type="submit">Login</button>