Angular Material Themes - 获取当前的原色答案

【问题标题】：Angular Material Themes - get current primary colorAngular Material Themes - 获取当前的原色
【发布时间】：2019-04-01 14:43:00
【问题描述】：

目前我有 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）。

有什么方法可以获取当前主题的主要类，不管它是什么？

【问题讨论】：

你可以试试看这个link
最简单的方法是在全局样式表中创建一个应用主题背景颜色的类

标签： angular angular-material2

【解决方案1】：

这是我在主题文件中的解决方案，使其适用于明暗：

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 将是您用来将应用程序切换到暗模式（或任何其他主题）的类。页脚可以更改为任何其他选择器。

【讨论】：