Создание пользовательских вариантов цветов темы материалов в Angular scss - PullRequest
Новая
       72

Создание пользовательских вариантов цветов темы материалов в Angular scss

0 голосов
/ 04 мая 2020

Я новичок в angular, материалы IO, с css et c. но создали приложение angular и данные летают по странице. Yipp ie!

У меня есть список предметов, которые были оценены как лучшие, лучшие меньше, лучшие меньше двух и так далее c. поэтому я подумал предоставить визуальную обратную связь относительно того, какие есть какие; например, измените цвет фона соответствующим образом.

Я НЕ действительно хочу использовать (без необходимости) любой из:

  1. моя собственная тема
  2. моя собственная палитра
  3. фиксированный цвет, такой как 'желтый' или 'зеленый'.

I do хочу использовать оттенки палитра из тем основного, вторичного или акцентного цвета.

Вот мой код в src/styles.scss, использующий фиксированный цвет. 

@import '@angular/material/prebuilt-themes/pink-bluegrey.css';
@import '~@angular/material/theming';

$myPalette: mat-palette($mat-green);  // **What do I do here to use a theme color?**

$bestScore-0: mat-color($myPalette, 200);
$bestScore-1: mat-color($myPalette, 400);
// etc.

.bestScore-0 {
    background-color: $bestScore-0;
}

.bestScore-1 {
    background-color: $bestScore-1;
}
// etc.

Любая хорошая документация о восстановлении темы цвета где-то? Это кажется очевидным, но я не нашел никаких документов.

Какую функцию или глобальную переменную, которая обращается к теме, я бы использовал в своих глобальных темах, чтобы начинался с цвета темы и go оттуда?

...