Angular'da özel tema paletlerini nasıl kullanabilirim?

Uygulama genelinde şirketimin marka renklerini kullanmak istiyorum.

Bu sorunu buldum: AngularJS 2 - Materyal tasarımı - iddia edildiği gibi özel bir tema oluşturabileceğim renk paleti ayarlayın , ancak temelde sadece önceden oluşturulmuş paletlerin farklı bölümlerini kullanıyor. Material2'nin önceden tanımlanmış renklerini kullanmak istemiyorum. Eşsiz ve özel marka renklerimi istiyorum. Kendi temamı oluşturmanın, etrafta dolaşmaktan daha iyi bir yolu var mı _palette.scss?

Marka paletim için bir mixin yapmam gerekiyor mu? Eğer öyleyse - nasıl düzgün yapılacağına dair herhangi bir kılavuz var mı? Farklı renk tonlarının anlamları nelerdir (50, 100, 200, A100, A200 ... gibi sayılarla işaretlenmiştir)?

Bu alanla ilgili herhangi bir bilgi çok takdir edilecektir!

Biraz araştırma yaptıktan sonra, onu benim için çözen bu sonuca ulaştım, umarım size de yardımcı olur.

Adım 1: Marka renklerinden kendi paletlerinizi oluşturun.

Marka renginizi girdiğiniz bu harika web sitesini bulduk ve o marka renginin farklı tonlarıyla eksiksiz bir palet oluşturdu: http://mcg.mbitson.com

Bu aracı hem primaryrengim (marka rengim) hem de accentrenk için kullandım.

Adım 2: Özel tema dosyanızda paletler oluşturun

İşte böyle bir .scssdosyanın nasıl oluşturulacağına dair bir kılavuz : 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);

Yukarıdaki kodla ilgili bazı açıklamalar

Sol taraftaki rakamlar parlaklık "seviyesini" belirler. Varsayılan değer 500'dür (bu, marka rengimin / vurgu rengimin gerçek gölgesidir). Yani bu örnekte marka rengim #5282c1. Geri kalanlar bu rengin diğer tonlarıdır (burada daha düşük sayılar daha parlak gölgeler ve daha yüksek sayılar daha koyu gölgeler anlamına gelir). AXXXFarklı tonları vardır. Nerede kullanıldıklarından (henüz) emin değilim. Yine, daha düşük bir sayı daha parlak ve daha yüksek sayılar daha koyu anlamına gelir.

contrastBu arka plan renkleri üzerinde yazı tipi rengini ayarlar. CSS aracılığıyla yazı tipinin parlak (beyaz) veya koyu (0.87 opaklık ile siyah) olması gerektiğini hesaplamak çok zor (hatta imkansız), böylece renk körü insanlar için bile kolayca okunabilir. Bu, manuel olarak ayarlanır ve palet tanımına sabit kodlanır. Bunu, yukarıda bağladığım palet oluşturucudan da elde edersiniz (eski Material1 formatında çıktısı alınmasına rağmen ve bunu burada yazdığım gibi manuel olarak Material2 formatına dönüştürmeniz gerekecek).

Temayı, renk olarak marka renk paletini ve primaryrenginiz olarak vurgulamak istediğiniz her şeyi kullanacak şekilde ayarlayın accent.

3. Adım: Temayı uygulama genelinde mümkün olan her yerde kullanın

Bazı elementler tema renkleri gibi alabilir <md-toolbar>, <md-input>, <md-button>, <md-select>vb. primaryVarsayılan olarak kullanacaklarından , marka renk paletini birincil olarak ayarladığınızdan emin olun. Rengi değiştirmek istiyorsanız, coloryönergeyi kullanın (bu bir Açısal yönerge mi?).

Örneğin:

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

Aşağıdaki web sitesini kullanmayı deneyin, açısal temaları özelleştirmek kolay görünüyor. https://materialtheme.arcsine.dev/