官方
theming documentation of Angular Material2中明确说明如下：
In Angular Material,a theme is created by composing multiple palettes. In particular,a theme consists of:
- A primary palette: colors most widely used across all screens and components.
- An accent palette: colors used for the floating action button and interactive elements.
- A warn palette: colors used to convey error state.
- A foreground palette: colors for text and icons.
- A background palette: colors used for element backgrounds.
但在每个例子中,他们只修改前三个：
@import '~@angular/material/theming'; @include mat-core(); $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink,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); @include angular-material-theme($candy-app-theme);
所以我的问题是：如何更改前景调色板以更改主调色板或辅助调色板的文本颜色？
有一些网站(materialpalette.com,material.io)显示了易于可视化的调色板,但他们仍未说明如何在Angular Material2中包含或修改该调色板.
解决方法
您可以通过创建自己的前景贴图来更改默认主题颜色,并在初始化之前将其合并到创建的主题中.方法如下：
>像往常一样构建主题对象.
@import '@angular/material/theming.scss'; @include mat-core(); // Choose colors $my-app-primary: mat-palette($mat-blue-grey); $my-app-accent: mat-palette($mat-light-green); $my-app-warn: mat-palette($mat-red); // Build theme object (its practically a map object) $my-app-theme: mat-light-theme($my-app-primary,$my-app-accent,$my-app-warn);
>使用自定义函数构建自定义前景,返回@ angular / material / _theming.scss中定义的前景图 – > $mat-light-theme-foreground功能.
您可以使用地图并仅定义所需的字段,并将其他字段保留为默认值.
@function my-mat-light-theme-foreground($color) {
@return (
base: $color,divider: $black-12-opacity,dividers: $black-12-opacity,disabled: rgba($color,0.38),disabled-button: rgba($color,disabled-text: rgba($color,hint-text: rgba($color,secondary-text: rgba($color,0.54),icon: rgba($color,icons: rgba($color,text: rgba($color,0.87),slider-off: rgba($color,0.26),slider-off-active: rgba($color,);
};
// You can put any color here. I've chosen mat-color($my-app-primary,700)
$my-foreground: my-mat-light-theme-foreground(mat-color($my-app-primary,700));
>仅将前面创建的主题与前景地图合并,并初始化自定义主题.
注意：由于SCSS中的所有映射都是不可变的,因此map-merge()返回新的映射实例并且不会修改映射 – 因此我们有另一个变量$my-app-theme-custom来保存结果主题.
$my-app-theme-custom: map-merge($my-app-theme,(foreground: $my-foreground)); // Include your custom theme. @include angular-material-theme($my-app-theme-custom);
注意：我正在使用Angular Material v2.0.0-beta.8
