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

Question

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

29

在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

5个回答

7

这份指南可以在文档网站上找到，位置在这里。

首先，您需要定义主题的调色板，例如$primary，$accent，$warn（在指南中它们有一个$candy-app-前缀），然后创建一个$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”属性的代码：

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

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

我从2.0.0-beta.2升级到2.0.0-beta.3，文件夹结构看起来不同了，你是正确的。现在是\node_modules\@angular\material\_theming.scss，_palette.scss文件已经不存在了。不过你可以通过全局搜索它：'$mat-dark-theme-background: ('。 _theming.scss包含所有颜色、映射和所有的函数，如mat-color。

- Wladimir

4

在获取了前景调色板和基于它们的键的一些值后，我该如何在我的主题上设置前景色？ - JoeCool-Avismón

4

要更改前景文本颜色，首先按照通常的方式创建您的主题，然后覆盖theme.color.foreground.text：

// define theme as you do currently, e.g.
$theme: mat.define-light-theme(...)

/ grab color.foreground map from theme
$color: map-get($map: $theme, $key: color);
$foreground: map-get($map: $color, $key: foreground);

// override text of foreground map
$my-text-color: #3B4956;
$themed-foreground: map-merge($foreground, (text: $my-text-color));

// override foreground of $color map
$themed-color: map-merge($color, (foreground: $themed-foreground));

// override color of theme map
$theme: map-merge($theme, (color: $themed-color));

按照惯例，从$theme中生成css，例如@include mat.all-component-themes($theme) - 确保只做一次。可以通过以下方式实现：

_theme.scss 
// contains above theme - ok to include many places

theming.scss 
// generates css - only include once!
@import './theme';
...
@include mat.all-component-themes($theme)

我很惊讶地发现，目前还没有更简单的方法来实现这个功能，希望这种情况会在未来得到改善。祝好运。

- corolla

2

更新Angular Material >14

我一直在使用nyxz的答案，但自从Angular 14以来，我唯一成功覆盖主题前景的方法是:

$my-app-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-app-primary,
      accent: $my-app-accent,
      warn: $my-app-warn
    ),
    typography: $custom-typography
  )
);

$my-app-colors: map.get($my-app-theme, color);

$my-app-olors: map.merge(
  $my-app-colors,
  (
    foreground:  $my-foreground
  )
);

$my-app-theme: map.merge(
  $my-app-theme,
  (
    color: $my-app-colors
  )
);

- JayChase

1

你还可以这样写：$my-app-theme: map.set($my-app-theme, color, foreground, $my-foreground);。这样你就不需要使用 map.get 了。 - Michael Rentmeister

1

这是代码：

// 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

例如，获取 'secondary-text':

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

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

- Wladimir

2

感谢您的回答，但是您指定的路径我在我的项目中找不到，您使用的angular-material2版本是多少？您能否解释一下您示例中的$theme、foreground和secondary-text？谢谢！ - CodeArtist

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nyxz · Accepted Answer

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

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

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

 @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, 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来保存结果主题。

 $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，因为一些人在评论中报告说它已经在后来的版本中添加到前景地图中了。