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>