Angular Material Themes - получить текущий основной цвет - PullRequest
Новая
       8

Angular Material Themes - получить текущий основной цвет

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

В настоящее время у меня есть 2 темы: Светлая: 

$candy-app-primary: mat-palette($mat-blue, A700);
$candy-app-accent:  mat-palette($mat-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);

$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

Темная: 

$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

Иногда я использую основной цвет темы по умолчанию следующим образом: 

.extend-toolbar {
  background-color:  mat-color($candy-app-primary);
  color: white;
}

но если я изменю пользовательскую тему (например, установив тему на темный) - класс css по-прежнему будет принимать основной цвет темы по умолчанию. (всегда используется $candy-app-primary, хотя тема была изменена на DARK).

Любой способ взять основной класс текущей темы, какой бы она ни была?

1 Ответ

0 голосов
/ 09 апреля 2019

Вот мое решение в файле темы, чтобы оно работало как для светлых, так и для темных: 

footer {
  background-color: mat-color($primary);
}

.dark {
  @include angular-material-theme($dark-theme);
  background-color: #121212;
  color: white;

  footer {
    background-color: mat-color($dark-primary);
  }
}

.dark - это класс, который вы используете для переключения приложения в темный режим (или любой другойтема).Нижний колонтитул можно изменить на любой другой селектор.

...