Как эффективно использовать цветовую палитру Angular Material Angular Material - PullRequest
Новая
       21

Как эффективно использовать цветовую палитру Angular Material Angular Material

0 голосов
/ 31 октября 2018

Я использую пользовательскую цветовую палитру. определили основную и акцентную палитры с их оттенком по умолчанию, более темным, более светлым, как показано ниже: 

  $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
$my-app-accent:  mat-palette($md-lightaccent, 500,900,A100);
$my-app-warn:    mat-palette($md-warn);

/*finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme function,*/
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
/* and finally include the result of calling the angular-material-theme function with our $my-app-theme.*/
@include angular-material-theme($my-app-theme);

Вопросы:

1. Если я использую в коде color="primary" или color="accent", чем он устанавливает цветовой оттенок default, Вопрос в том, как использовать оттенки lighter и darker, которые мы использовали как часть начальной настройки темы.

2. Как использовать любые другие оттенки из палитры для оттенков primary или accent.

Ответы [ 3 ]

0 голосов
/ 13 мая 2019

Насколько я знаю, не существует простого способа использовать оттенки не по умолчанию из вашей пользовательской палитры, просто изменив HTML (т.е. <button color="primary-lighter"> не работает).

Самый простой способ, который я нашел, - включить пользовательские темы в файл Theme.scss, например: 

$my-accentpalette: ( 50 : #f9f2eb, ... A700 : #ffae71, contrast: ( 50 : #000000, ..., A700 : #000000, ) );

.lighter-style {
        background-color: mat-color($my-accentpalette, 200);
        color: mat-contrast($my-accentpalette, 200);
}

(Обратите внимание, я только что выбрал запись '200' из палитры, выберите все, что вы хотите). Затем вы можете применить стиль к любому желаемому HTML-элементу: 

<button class="lighter-style">

Некоторые вспомогательные ссылки, которые я нашел полезными:

0 голосов
/ 21 июня 2019

У меня также есть похожая проблема с материальными угловыми оттенками. Поскольку я не могу найти решение (исключая возможность использования классов, которые будут ссылаться на другую тему) в сети, я использовал обычную встроенную функцию scss, такую ​​как ниже: 

@import "./../../my-theme.scss";

a{
 color: darken($accent, 30%);
}
0 голосов
/ 01 ноября 2018

Проверьте код, который я написал ниже. проверить закомментированные строки для использования

Theme.scss 

  $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
  $my-app-accent:  mat-palette($md-lightaccent, 500,900,A100);
  $my-app-warn:    mat-palette($md-warn);

  $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives light theme
  $my-app-dark-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives dark version of the above theme

  //apply this class to any element you want to apply dark theme or set class to <body> so apply it to whole site
  .dark-theme { 
      @include angular-material-theme($my-app-dark-theme);
  }
  @include angular-material-theme($my-app-theme); //default theme
...