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;
}

如何选择材质颜色的变化以设置角度零部件的样式

1 个答案: