如何选择材质颜色的变化来设置 Angular 组件的样式

Question

有没有办法定义在将颜色设置为重音（或主要）时将使用哪种调色板变体？

例如，我希望将工具栏的背景颜色设置为 A100，但 Angular Material 默认选择 300。

我已经定义了一个自定义主题：

@include mat-core();
$my-app-primary: mat-palette($mat-light-blue);
$my-app-accent: mat-palette($mat-grey, 300, 200, A100);
$my-app-warn: mat-palette($mat-deep-orange);

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

@include angular-material-theme($my-app-theme);

我希望将工具栏背景颜色设置为我选择的调色板的变体之一：

<mat-toolbar color="accent"> <!-- how to set accent variation -->
    <span>My Application</span>
</mat-toolbar>

我知道我可以覆盖 css。如果这是要走的路，我怎样才能重用_theming.scss 中定义的变量，这样我就不会偏离调色板的颜色？

Answer 1

您可以简单地导入您的样式变量，然后使用它们。

@import "../../_theming.scss"; // <-- set your path to '_theming.scss'

mat-toolbar {
    background-color: $my-app-primary;
}