угловой материал 2 пользовательские темы кнопки контраст - PullRequest
Новая
       10

угловой материал 2 пользовательские темы кнопки контраст

1 голос
/ 28 марта 2019

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

, чтобы создать собственную палитру. Я использовал этот инструмент http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5

, он прекрасно работает https://stackblitz.com/edit/angular-material-custom-theme-button-contrast?file=styles.scss но проблема только в том, как сделать так, чтобы цвет текста кнопки был белым на зеленом фоне?я пробовал разные числа, но ничего не получалось 

$my-primary: mat-palette($mat-my-green, 500, 50, 50);
$my-accent: mat-palette($mat-my-black, 500, 900, 400);

с использованием 

.mat-raised-button{
    line-height: 29px;
    margin-right: 8px;
    &.mat-primary{
      color: mat-contrast($mat-keldano-green,900); // get the contrast color
    }}

это работает, но я не думаю, что это хорошее решение, другая проблема - номера шагов шагового компонента также имеют проблему контраста enter image description here

1 Ответ

0 голосов
/ 28 марта 2019

Кнопка использует 500 в качестве цвета фона - по крайней мере, в вашей настройке. В вашей конфигурации вы заявляете, что контрастный цвет для 500 равен #000000. Установите #ffffff, и все готово.

Свойство contrast сообщает материалу, какой цвет выбрать над цветным фоном. Таким образом, строка 100: #000000 означает «, когда фон 100, используйте #000000 в качестве цвета текста ». Это обеспечивает удобочитаемость текста.

Материал использует 3 цветовых оттенка для своих элементов. Эти цвета выбираются по телефону mat-palette. 

$my-primary: mat-palette($mat-my-green, 500, 50, 50);

Этот вызов указывает материалу использовать 500 в качестве "основного" оттенка, 50 в качестве более темного и 50 в качестве более светлого. Поэтому кнопка имеет цвет 500, а затем для текста выбирается контрастный цвет.

Чтобы сделать текст более 500 белым: 

contrast: (50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
));

https://stackblitz.com/edit/angular-material-custom-theme-button-contrast-8ma1fp?file=styles.scss

white on green

...