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

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

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

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

Ответы (3)

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

Шаг 1. Создайте свои собственные палитры из фирменных цветов.

Нашел этот замечательный веб-сайт, где вы вводите цвет своего бренда, и он создает полную палитру с различными оттенками этого цвета бренда: http://mcg.mbitson.com

Я использовал этот инструмент как для моего основного цвета (это мой фирменный цвет), так и для акцентного цвета.

Шаг 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 бывают разных оттенков. Не уверен (пока), где они используются. Опять же, меньшее число означает более яркое, а большее число означает более темное.

Контраст устанавливает цвет шрифта поверх этих цветов фона. Очень сложно (или даже невозможно) вычислить с помощью CSS, где шрифт должен быть ярким (белым) или темным (черный с непрозрачностью 0,87), чтобы его легко читали даже люди с дальтонизмом. Таким образом, это устанавливается вручную и жестко запрограммировано в определении палитры. Вы также получаете это из генератора палитры, который я привел выше (хотя он выводится в старом формате Material1, и вам придется вручную преобразовать его в формат Material2, как я писал здесь).

Установите тему для использования цветовой палитры бренда в качестве основного цвета, а все, что у вас есть для акцента, в качестве акцентного цвета.

Шаг 3. Используйте тему во всем приложении везде, где можете

Некоторые элементы могут принимать цвета темы, например , , , и так далее. По умолчанию они будут использовать основной, поэтому убедитесь, что вы установили цветовую палитру бренда как основную. Если вы хотите изменить цвет, используйте директиву color (это директива Angular?).

Например:

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

С Angular Material v12 тема материала выглядит так и должна быть импортирована styles.scss

@use '~@angular/material' as mat;
@import './custom-palettes';

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat.define-palette(mat.$gray-palette, 900, 800, 900);
$candy-app-accent: mat.define-palette(mat.$green-palette, 900, 800, 900);
$candy-app-warn: mat.define-palette($wfs-blue-palette, 800, 700, 900);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($candy-app-theme);

. / Custom-palettes выглядит так:

// see http://mcg.mbitson.com

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

$wfs-blue-palette: (
  50: #eaeef3,
  100: #cad6e0,
  200: #a7bacc,
  300: #849eb7,
  400: #698aa7,
  500: #4f7598,
  600: #486d90,
  700: #3f6285,
  800: #36587b,
  900: #26456a,
  A100: #add1ff,
  A200: #7ab5ff,
  A400: #4798ff,
  A700: #2e8aff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

Как и в верхнем ответе, для генерации цветов используется http://mcg.mbitson.com.

2022 WebDevInsider