Angular 2 材质前景

Question

在 angular 2 材质中更改前景颜色时遇到困难。例如在工具栏中，文本是黑色的。我尝试用以下样式更改它

@import '~@angular/material/theming';

$primary: mat-palette($mat-cyan, 300);
$accent : mat-palette($mat-yellow, 500);;
$warn : mat-palette($mat-red, 600);

$theme-foreground: (
  base:              gray,
  divider:           $white-12-opacity,
  dividers:          $white-12-opacity,
  disabled:          rgba(200, 200, 200, 0.38),
  disabled-button:   rgba(200, 200, 200, 0.38),
  disabled-text:     rgba(200, 200, 200, 0.38),
  hint-text:         rgba(200, 200, 200, 0.38),
  secondary-text:    rgba(200, 200, 200, 0.54),
  icon:              rgba(200, 200, 200, 0.54),
  icons:             rgba(200, 200 , 200, 0.54),
  text:              rgba(200, 200, 200, 0.87),
  slider-min:        rgba(200, 200, 200, 0.87),
  slider-off:        rgba(200, 200, 200, 0.26),
  slider-off-active: rgba(200, 200, 200, 0.38),
);

$theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(200, 200, 200, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: $black-12-opacity,
  raised-button: white,
  focused-button: $black-6-opacity,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
);

$theme: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: true,
    foreground: $theme-foreground,
    background: $theme-background
  );

@include mat-core();

@include angular-material-theme($theme);

主色和强调色已更改，但前端没有更改。 我该如何解决？

我也尝试设置工具栏主题，但没有任何区别。

Answer 1

您设置自定义前景和背景的方式是正确的 - 但是，对于工具栏，字体颜色决定如下：

• 如果工具栏设置为主要/强调/警告颜色，请使用默认对比度颜色
• 否则使用前景文本颜色

换句话说，如果您的工具栏颜色使用主调色板，您将不得不使用 $primary 的对比色 - 不建议这样做，因为任何数量的材质组件都使用这些。最好采用老式方式并手动更改工具栏颜色。

如果你真的下定决心，你可以用你想要的对比色制作一个自定义的主/重音调色板，并用它来创建你的主题，如下所示： https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss

我建议坚持使用灰度颜色进行对比 - 在某些情况下，Material 会采用一种颜色并将其反转，因此您最终可能会得到一些古怪的东西。

Answer 2

尝试定义您自己的主题，您还可以按照此处的说明定义前景色：

How can I use custom theme palettes in Angular?

更新因为反对票，这可能来自不知道材料设计如何工作的人：

如果您不知道 Material Design 的工作原理，请先阅读优秀指南https://tomastrajan.medium.com/the-complete-guide-to-angular-material-themes-4d165a9d24d1 并查看https://material.io/design/material-theming/overview.html#material-theming 的官方文档

关于这篇文章的评论，Material Design 不知道前景色。我理解人们的意思是“前景”颜色，即字体的颜色。没有一种颜色，有多种颜色。您需要了解更多关于 Angular 中如何设置字体颜色的主题。下面我简单解释一下。

Material Design 使用主要、强调和警告颜色，每个组件使用不同的颜色。

您使用 mat-palette 定义主要颜色、重音颜色和警告颜色，它采用How can I use custom theme palettes in Angular? 接受的答案中所示的样式作为第一个参数。 Material Design 为每种颜色使用默认的、较浅和较深的变体，默认情况下是为键 500、100 和 700 定义的颜色。您可以通过向 mat-palette 提供更多参数来更改变体。

在每种颜色（主要、重音和警告）的主题定义中，都有一个对比度条目。在对比度条目下，您可以找到与为主题定义的颜色变体相对应的字体颜色。

我所指的 StackOverflow 帖子深入解释了诸如

对比度将字体颜色设置为这些背景颜色。

别人已经解释的很好，我不需要再解释了。我最好只链接到解释。然而，我无法控制，因为 Material Design 不知道“前景”颜色的概念，但使用了不同的术语。