Bagaimana saya bisa menggunakan palet tema khusus di Angular?

Saya ingin menggunakan warna merek perusahaan saya di seluruh aplikasi.

Saya telah menemukan masalah ini: AngularJS 2 - Desain material - mengatur palet warna di mana saya dapat membuat tema yang diduga khusus , tetapi pada dasarnya hanya menggunakan bagian berbeda dari palet yang dibuat sebelumnya. Saya tidak ingin menggunakan warna standar Material2. Saya ingin warna merek saya yang unik dan spesial. Apakah ada cara yang lebih baik (lebih tepat?) Untuk membuat tema saya sendiri, daripada sekadar meretas _palette.scss?

Apakah saya perlu membuat mixin untuk palet merek saya? Jika demikian - ada panduan tentang cara melakukannya dengan benar? Apa arti dari bayangan warna yang berbeda (ditandai dengan angka seperti: 50, 100, 200, A100, A200 ...)?

Informasi apa pun tentang area ini akan sangat dihargai!

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>

Coba gunakan situs web di bawah ini, ini sepertinya mudah untuk menyesuaikan tema sudut. https://materialtheme.arcsine.dev/