如何在 Angular Material2 中更改主调色板的字体颜色? [英] How to change font color of primary palette in Angular Material2?

问题描述

在官方 Angular Material2 的主题文档 中，它指出清楚如下:

In the official theming documentation of Angular Material2 it states clearly the following:

在 Angular Material 中，主题是通过组合多个调色板来创建的.具体而言，主题包括:

In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of:

• 主要调色板:在所有屏幕和组件中使用最广泛的颜色.
• 重点调色板:用于浮动操作按钮和交互元素的颜色.
• 警告调色板:用于传达错误状态的颜色.
• 前景调色板:文本和图标的颜色.
• 背景调色板:用于元素背景的颜色.

但在每个示例中，他们只修改前三个:

But in every example they modify only the first three:

@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);

所以我的问题是:如何更改前景调色板以更改主调色板或辅助调色板的文本颜色?

So my question is: How can I change the foreground palette in order to change the color of the text for the primary or the secondary palette?

有一些网站(materialpalette.com、material.io) 显示调色板以便于可视化，但他们仍然没有说明如何包含或在 Angular Material2 中修改该调色板.

There are some websites (materialpalette.com, material.io) which show the color palette for easy visualization but still they don't say how to include or modify that palette in Angular Material2.

推荐答案

您可以通过创建自己的前景图来更改默认主题颜色，并在初始化之前将其合并到创建的主题中.方法如下:

You can change the default theme color by creating your own foreground map and merge it into the created theme before initializing it. Here is how:

1. 照常构建主题对象.

1. Build the theme object as usual.

 @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 函数.
您可以使用地图并仅定义您想要的字段，而将其他字段保留为默认值.

Build your custom foreground using a custom function returning foreground map as defined in @angular/material/_theming.scss -> $mat-light-theme-foreground function.
You can play with the map and define only the fields you want and leave the others as default.

 @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, 0.38),
         disabled-text:     rgba($color, 0.38),
         hint-text:         rgba($color, 0.38),
         secondary-text:    rgba($color, 0.54),
         icon:              rgba($color, 0.54),
         icons:             rgba($color, 0.54),
         text:              rgba($color, 0.87),
         slider-min:        rgba($color, 0.87),
         slider-off:        rgba($color, 0.26),
         slider-off-active: rgba($color, 0.38),
     );
 };

 // 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 保存结果主题.

Merge the previously created theme with just the foreground map and initialize your custom theme.
Note: Since all maps in SCSS are immutable the map-merge() returns new map instance and DOES NOT modify the map in place - thus we have another variable $my-app-theme-custom to hold the result theme.

 $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

编辑 2020 年 10 月: - 我已将属性 slider-min 添加到地图中，因为评论中的几个人报告说它已添加到前景地图中稍后构建.

EDIT Oct 2020: - I've added the property slider-min to the map since couple of folks in the comments reported it was added in the foreground map in later builds.

这篇关于如何在 Angular Material2 中更改主调色板的字体颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！