Как я могу использовать собственные палитры тем в Angular?

Я хочу использовать фирменные цвета моей компании во всем приложении.

Я обнаружил эту проблему: AngularJS 2 - Дизайн материалов - установите цветовую палитру, в которой я могу создать предположительно настраиваемую тему, но в основном она просто использует различные части предварительно созданных палитр. Я не хочу использовать предопределенные цвета Material2. Я хочу свои уникальные и особенные фирменные цвета. Есть ли лучший способ (более правильный?) Создать мою собственную тему, чем просто возиться с ней _palette.scss?

Нужно ли мне делать миксин для палитры моего бренда? Если да - какие-нибудь гайды, как это сделать правильно? Какое значение имеют разные оттенки цветов (обозначенные цифрами, например: 50, 100, 200, A100, A200 ...)?

Мы будем очень благодарны за любую информацию об этой области!

После некоторых исследований я пришел к такому выводу, который помог мне решить эту проблему, надеюсь, это поможет и вам.

Шаг 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>

Попробуйте использовать нижеприведенный веб-сайт, кажется, это легко настроить угловые темы. https://materialtheme.arcsine.dev/