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

Я использую угловой материал в angular 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. но я не уверен, как использовать эти цвета.


angular angular-material angular-material-7 angular-material-theming
person Ankur Akvaliya    schedule 16.03.2019    source источник
comment
Ознакомьтесь с документацией по темам: material.angular.io/guide/theming   -  person Josef Katič    schedule 16.03.2019
comment
Я не смог найти ничего связанного с методом/способом использования цветов, отличных от поддонов.   -  person Ankur Akvaliya    schedule 16.03.2019
comment
Итак, вы хотите создать собственную палитру?   -  person Josef Katič    schedule 16.03.2019
comment
вы можете использовать ngStyle для изменения цвета фона по желанию:   -  person Amit Baranes    schedule 16.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

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