Jak mogę używać niestandardowych palet motywów w Angular?

Chcę używać kolorów marki mojej firmy w całej aplikacji.

Znalazłem ten problem: AngularJS 2 - Material design - ustaw paletę kolorów, w której mogę zbudować rzekomo niestandardowy motyw, ale w zasadzie jest to po prostu użycie różnych części gotowych palet. Nie chcę używać predefiniowanych kolorów Material2. Chcę mieć niepowtarzalne i specjalne kolory marki. Czy jest lepszy sposób (lepiej?) Na stworzenie własnego motywu niż zwykłe robienie zdjęć _palette.scss?

Czy muszę zrobić mixin dla mojej palety marek? Jeśli tak - jakieś poradniki, jak to zrobić poprawnie? Jakie znaczenie mają różne odcienie kolorów (oznaczone numerami: 50, 100, 200, A100, A200 ...)?

Wszelkie informacje na ten temat będą mile widziane!

Po kilku badaniach doszedłem do tego wniosku, który rozwiązał go dla mnie, mam nadzieję, że ci też pomoże.

Krok 1: Stwórz własne palety z kolorów brandingowych.

Znalazłem tę niesamowitą stronę internetową, na której wpisujesz kolor swojej marki i tworzy ona kompletną paletę z różnymi odcieniami koloru tej marki: http://mcg.mbitson.com

Użyłem tego narzędzia zarówno do mojego primarykoloru (który jest kolorem mojej marki), jak i do accentkoloru.

Krok 2: utwórz palety w niestandardowym pliku motywu

oto poradnik jak stworzyć taki .scssplik: 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);

Kilka wyjaśnień na temat powyższego kodu

Liczby po lewej stronie określają „poziom” jasności. Wartość domyślna to 500 (czyli prawdziwy odcień koloru mojej marki / koloru akcentującego). W tym przykładzie kolor mojej marki to #5282c1. Reszta to inne odcienie tego koloru (gdzie niższe liczby oznaczają jaśniejsze odcienie, a wyższe liczby oznaczają ciemniejsze odcienie). AXXXSą różne odcienie. Nie wiem (jeszcze), gdzie są używane. Ponownie, niższa liczba oznacza jaśniejszy, a wyższy numer oznacza ciemniejszy.

contrastUstawia kolor czcionki na tych kolorów tła. Jest bardzo trudne (lub nawet niemożliwe) obliczenie za pomocą CSS, gdzie czcionka powinna być jasna (biała) lub ciemna (czarna z kryciem 0,87), więc jest łatwa do odczytania nawet dla osób niewidomych na kolory. Jest to więc ustawiane ręcznie i na stałe zakodowane w definicji palety. Dostajesz to również z generatora palet, który połączyłem powyżej (chociaż jest on wyprowadzany w starym formacie Material1 i będziesz musiał ręcznie przekonwertować to na format Material2, tak jak zamieściłem tutaj).

Ustaw motyw, aby użyć palety kolorów marki jako primarykoloru i wszystkiego, co masz jako akcent jako accentkolor.

Krok 3: Używaj motywu w całej aplikacji, gdzie tylko możesz

Niektóre elementy mogą podjąć kolorów motywu, jak <md-toolbar>, <md-input>, <md-button>, <md-select>i tak dalej. Będą używane primarydomyślnie, więc upewnij się, że ustawiłeś paletę kolorów marki jako podstawową. Jeśli chcesz zmienić kolor, użyj colordyrektywy (czy jest to dyrektywa Angular?).

Na przykład:

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

Spróbuj użyć poniższej witryny, wydaje się to łatwe do dostosowania motywów kątowych. https://materialtheme.arcsine.dev/