Ответ 1
После некоторых исследований я пришел к такому выводу, который решил его для меня, надеюсь, он вам тоже поможет.
Шаг 1: Создайте свои собственные палитры из фирменных цветов.
Нашел этот замечательный веб-сайт, на котором вы вводите цвет своего бренда, и он создает полную палитру с различными оттенками цвета этого бренда: http://mcg.mbitson.com
Я использовал этот инструмент как для primary
цвета (цвета моей марки), так и для цвета accent
.
Шаг 2. Создайте палитры в своем файле темы
Вот руководство по созданию такого файла .scss
: https://github.com/angular/material2/blob/master/guides/theming.md
@import '[email protected]/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
директиву (это угловая директива?).
Например:
<button mat-raised-button color="accent" type="submit">Login</button>