Setelah beberapa penelitian, saya berakhir dengan kesimpulan ini yang memecahkannya untuk saya, semoga ini akan membantu Anda juga.
Langkah 1: Buat palet Anda sendiri dari warna merek.
Temukan situs web yang luar biasa ini di mana Anda memasukkan warna merek Anda, dan itu menciptakan palet lengkap dengan nuansa berbeda dari warna merek itu: http://mcg.mbitson.com
Saya menggunakan alat ini untuk primarywarna saya (yang merupakan warna merek saya) dan accentwarnanya.
Langkah2: Buat palet di file tema kustom Anda
berikut adalah panduan cara membuat .scssfile tersebut: 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);
Beberapa penjelasan tentang kode di atas
Angka-angka di sisi kiri mengatur "level" kecerahan. Standarnya adalah 500 (yang merupakan bayangan sebenarnya dari warna warna / aksen merek saya). Jadi dalam contoh ini, warna merek saya adalah #5282c1. Sisanya adalah corak lain dari warna itu (di mana angka yang lebih rendah berarti corak yang lebih cerah dan angka yang lebih tinggi berarti corak yang lebih gelap). The AXXXnuansa yang berbeda. Tidak yakin (belum) di mana mereka digunakan. Sekali lagi, angka yang lebih rendah berarti lebih cerah dan angka yang lebih tinggi berarti lebih gelap.
The contrastmenetapkan warna font lebih warna-warna latar belakang. Sangat sulit (atau bahkan tidak mungkin) untuk menghitung melalui CSS di mana font harus terang (putih) atau gelap (hitam dengan opasitas 0,87) sehingga mudah dibaca bahkan oleh orang buta warna. Jadi ini diatur secara manual dan di-hardcode ke dalam definisi palet. Anda mendapatkan ini juga dari generator palet yang saya tautkan di atas (meskipun dikeluarkan dalam format Material1 lama, dan Anda harus mengonversinya secara manual ke format Material2 seperti yang saya posting di sini).
Tetapkan tema untuk menggunakan palet warna merek sebagai primarywarna, dan apa pun yang Anda miliki untuk aksen sebagai accentwarna Anda .
Langkah3: Gunakan tema di seluruh aplikasi di mana pun Anda bisa
Beberapa elemen dapat mengambil warna tema, seperti <md-toolbar>, <md-input>, <md-button>, <md-select>dan sebagainya. Mereka akan digunakan primarysecara default jadi pastikan Anda mengatur palet warna merek sebagai yang utama. Jika Anda ingin mengubah warna, gunakan colordirektif (apakah itu direktif Angular?).
Sebagai contoh:
<button mat-raised-button color="accent" type="submit">Login</button>