Угловой материал: как использовать все цвета темы

Question

Я использую угловой материал в угловой 7.

Я использовал angular-material в angular-1 раньше, и он предоставил способ (md-colors) для использования всех цветов.

Но для angular-material-7 я не могу найти такого рода собственность.

Когда мы используем цвет в компоненте, как кнопка

<button mat-raised-button color="primary">Primary</button>

В цвете мы можем использовать только первичные, акцентирующие и предупреждающие поддоны. Но я хочу использовать больше, чем эти 3 цвета. Я хочу использовать все цвета темы материала, как мы использовали в angular-material-1

Может кто-нибудь сказать мне, что я здесь скучаю. Все цветовые переменные существуют в @angular/material/theming.scss, но я не уверен, как использовать эти цвета.

Answer 1

Была такая же проблема, и до сих пор невозможно использовать значения, отличные от первичного, акцентирования и предупреждения для атрибута цвета. Тем не менее, есть запрос на github, связанный с этим: поддержка дополнительных цветов вне основного, акцент, предупреждение

Тем не менее, вы можете использовать несколько тем и применять каждую на основе родительского класса, как описано здесь.

Или вы можете применить каждую тему только к определенным компонентам, как описано здесь.

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

Другой вариант - использовать переменные CSS. Вы можете определить свои цвета в файле styles.css и затем использовать их в своих файлах CSS:

/* styles.css */
:root {
  --color-1: #003422;
}

/* component.css */
button {
  background-color: var(--color-1);
}