Question

在官方theming documentation of 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中包含或修改该调色板。

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

使用自定义函数构建自定义前景，返回前景图，如@angular/material/_theming.scss - ＆gt;中所定义。 $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-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来保存结果主题
```
$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

Answer 2

该指南位于here的文档网站上。

首先，您为主题定义调色板，例如$primary，$accent，$warn（在指南中有$candy-app-前缀），然后创建一个{ {1}}对象：

$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文件已经消失。你可以做全局搜索：'$ mat-dark-theme-background：（'

_palette.scss包含所有颜色，地图和所有功能，例如_theming.scss

Answer 3

以下是代码：

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:            black,
  divider:         rgba(black, 0.12),
  dividers:        rgba(black, 0.12),
  disabled:        rgba(black, 0.38),
  disabled-button: rgba(black, 0.38),
  disabled-text:   rgba(black, 0.38),
  hint-text:       rgba(black, 0.38),
  secondary-text:  rgba(black, 0.54),
  icon:            rgba(black, 0.54),
  icons:           rgba(black, 0.54),
  text:            rgba(black, 0.87)
);

您可以在以下位置找到地图：\ node_modules \ @angular \ material \ core \ theming \ _palette.scss

检索＆＃39;辅助文字的示例＆＃39;：

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

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

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

3 个答案: