Після деяких досліджень я закінчив цей висновок, який вирішив це для мене, сподіваюся, це допоможе і вам.
Крок 1. Створіть власні палітри з кольорів фірмових символів.
Знайшов цей чудовий веб-сайт, де ви вводите колір бренду, і він створює повну палітру з різними відтінками цього бренду: http://mcg.mbitson.com
Я використовував цей інструмент як для свого primaryкольору (що є кольором моєї марки), так і для accentкольору.
Крок 2: Створіть палітри у своєму користувацькому файлі теми
ось посібник зі створення такого .scssфайлу: 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);
Деякі пояснення наведеного вище коду
Цифри з лівого боку встановлюють "рівень" яскравості. За замовчуванням - 500 (що є справжнім відтінком мого брендового кольору / кольору акценту). Отже, у цьому прикладі колір мого бренду такий #5282c1. Решта - інші відтінки цього кольору (де нижчі цифри означають яскравіші відтінки, а вищі цифри означають темніші відтінки). Це AXXXрізні відтінки. Не впевнений (поки), де вони використовуються. Знову ж, менша цифра означає яскравішу, а вища цифра означає темнішу.
contrastВстановлює колір шрифту над цим кольором фону. Дуже важко (або навіть неможливо) розрахувати за допомогою CSS, де шрифт повинен бути яскравим (білим) або темним (чорний з непрозорістю 0,87), тому його легко читати навіть для дальтоніків. Отже, це встановлено вручну та жорстко закодовано у визначенні палітри. Ви також отримуєте це з генератора палітр, який я зв'язав вище (хоча він виводиться у старому форматі Material1, і вам доведеться вручну перетворити його у формат Material2, як я розмістив тут).
Встановіть тему, щоб використовувати кольорову палітру бренду як primaryколір, а будь-що для акценту - як ваш accentколір.
Крок 3: використовуйте тему в усьому додатку, де б ви не могли
Деякі елементи можуть взяти кольору теми, як <md-toolbar>, <md-input>, <md-button>, <md-select>і так далі. Вони використовуватимуть primaryза замовчуванням, тому обов’язково встановіть палітру кольорів бренду як основну. Якщо ви хочете змінити колір, використовуйте colorдирективу (це директива Angular?).
Наприклад:
<button mat-raised-button color="accent" type="submit">Login</button>