Я хочу использовать фирменные цвета моей компании во всем приложении.
Я обнаружил эту проблему: 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Некоторые пояснения к приведенному выше коду
Цифры слева задают «уровень» яркости. Значение по умолчанию - 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>
источник
@import '~@angular/material/theming'; @include mat-core();
Попробуйте использовать нижеприведенный веб-сайт, кажется, это легко настроить угловые темы. https://materialtheme.arcsine.dev/
источник