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

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

  $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 оттенков.


angular angular-material2 color-palette
person Tarun Patel    schedule 31.10.2018    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

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
person Akhi Akl    schedule 01.11.2018

arrow_upward
2
arrow_downward

Насколько мне известно, нет простого способа использовать оттенки, отличные от значений по умолчанию, из вашей пользовательской палитры, просто изменив 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">

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

person RocketMan    schedule 13.05.2019

arrow_upward
0
arrow_downward

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

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

a{
 color: darken($accent, 30%);
}
person Ofc_    schedule 21.06.2019