Question

我很难在角度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

尝试定义您自己的主题，您还可以在此处定义前景色，如下所示：

How can I use custom theme palettes in Angular?

Answer 2

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

如果工具栏设置为原色/重点色/警告色，请使用默认的对比色
否则使用前景文本颜色

换句话说，如果您的工具栏颜色使用的是主调色板，则您将不得不尝试使用$ primary的对比色-不建议这样做，因为许多材料组件都在使用这些颜色。最好采用老式的方法并手动更改工具栏的颜色。

如果确实愿意，可以使用所需的对比色制作自定义的主色/重点色调色板，并使用它来创建主题，如下所示： https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss

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

角度2材料前景

2 个答案: