Angular Material Primary、Accent 和 Warn 颜色不随主题而变化答案

【问题标题】：Angular Material Primary, Accent, and Warn Colours Not Changing With ThemeAngular Material Primary、Accent 和 Warn 颜色不随主题而变化
【发布时间】：2021-04-07 08:15:43
【问题描述】：

注意：对于将来发现此问题的任何人，Emilien 的解决方案只能在 angular material 10.0.0 之后使用。我检查了Angular Components 的源代码，并确定@mixin angular-material-color 包含在10.0.0 中。我会尝试升级，看看是否能解决我的问题。

更新：更新到angular 10和material 10后，使用@mixin angular-material-color时问题依旧没有解决。

我有一个运行 angular 9.1.13 和 angular material 9.1.3 的 Angular 站点，在 _themes.scss 文件中定义了多个主题。我正在尝试在运行时更改主题，并且可以更改大多数内容，但使用 color="primary" 或 color="accent" 的材质组件除外。

更改主题时，我更改了一个名为 theme 的变量，该变量在 <app-root> 中使用，如下所示：

  template: `
    <simple-notifications></simple-notifications>
    <div *ngIf="!loading">
      <div [class]="service.theme"><router-outlet></router-outlet></div>
    </div>

以及从Angular Material Site 上的文档更新覆盖容器上的类列表。

这是我的_themes.scss 中的附加主题的外观：

@import "~@angular/material/theming";
@import "_palette.scss";

@include mat-core();
/** main theme */
.. theme here ...

/* Additional Themes */
$dark-primary: mat-palette($mat-dark-primary, 800, 500, 900);
$dark-accent: mat-palette($mat-dark-accent, 700, 500, 900);
$dark-warn: mat-palette($mat-dark-warn);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

.dark-theme {
  ...other theme properties...
  @include angular-material-theme($dark-theme);
}

注意：我有一个 _palette.scss 文件，这是 $mat-dark 变量的来源

下面的屏幕截图是一些使用color="accent" 但不受我的自定义调色板中的强调色影响的材质按钮的示例。我希望它们是下方图像的蓝色。

我知道我可以在每个元素上放置一个类，而不是使用color="accent"，但不必这样做会更方便。

【问题讨论】：

试试@include angular-material-color($dark-theme);
@Emilien 我需要为此定义 mixin 吗？构建时获取SassError: no mixin named angular-material-color
您可以在您提供的链接上看到它（Angular Material Site）。然后你读到“angular-material-theme mixin 不应该被多次使用，因为它会为所有配置的主题系统部件生成样式。”
@Emilien 可能 angular-material-color 不是 9.1.3 中可用的 mixin，因为我无法使用它来构建它。
@Emilien 在更新到 angular 10 和 material 10 后，使用 angular-material-color 仍然不会改变主要颜色、重音颜色和警告颜色，还有其他建议吗？

标签： angular angular-material2

【解决方案1】：

对于遇到同样问题的任何人；我的解决方案是将每个组件包装在 <div class="{{ service?.theme }}"></div> 中，这会导致颜色相应更新。

【讨论】：