如何更改 Angular Material2 中主调色板的字体颜色？

Question

在 Angular Material2 的官方主题文档中， 它清楚地说明了以下内容：

在 Angular Material 中，一个主题是通过组合多个调色板来创建的。特别是，一个主题包括：

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

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

 @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 中包含或修改该调色板。

原文由 CodeArtist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

1. 像往常一样构建主题对象。

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

1. 使用自定义函数来构建自定义前景，该函数返回 @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, 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));

1. 将先前创建的主题与仅前景图合并并初始化您的自定义主题。

注意： 由于 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

编辑 2020 年 10 月： -我已将属性 slider-min 添加到地图中，因为评论中的几个人报告说它是在以后的版本中添加到前景地图中的。

原文由 nyxz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

该指南可在位于 此处 的文档网站上找到。

First, you define the palettes for your theme, such as $primary , $accent , $warn (in the guide they have $candy-app- prefix)然后创建一个 $theme 对象：

 // Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);

一旦我们有了一个包含所有调色板的主题，我们就可以从中获得一个前景调色板：

 $foreground: map-get($theme, foreground);

从 $foreground 调色板我们可以得到任何基于键的值，例如

secondary-text: rgba(black, 0.54),

或者

text: rgba(black, 0.87)

这是检索 secondary-text 属性的代码：

 color: mat-color($foreground, secondary-text);

我从 --- 切换到 2.0.0-beta.3 2.0.0-beta.2 并且文件夹结构看起来不同，你是对的。现在是 \node_modules\@angular\material_theming.scss , _palette.scss 文件不见了。您可以对其进行全局搜索：’$mat-dark-theme-background: (’

_theming.scss 拥有所有颜色、地图和所有功能，例如 mat-color

原文由 Wladimir 发布，翻译遵循 CC BY-SA 3.0 许可协议