Angular Material更改默认字体颜色

Question

我正在使用Angular Material，对于主题设置感到有些迷茫。我正在使用预先构建的indigo-pink主题，如下所示包含在我的styles.scss中。

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 

根据文档，我创建了一个名为theme.scss的新文件，并在styles.scss之后将其包含在angular.json中。theme.scss如下所示。

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

@include mat-core();

$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent:  mat-palette($mat-pink, A200, A100, A400);

$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);

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

我的要求 我只需要将默认字体颜色从黑色改为白色，无需改变任何其他内容。 我已经从示例中复制了主要和强调调色板，所以感觉它们也不需要更改。

- Moblize IT

---

这回答解决了你的问题吗？如何在Angular Material2中更改主色板的字体颜色？ - JayChase

Answer 1

我认为这篇文章回答了你的问题：https://dev59.com/XVcQ5IYBdhLWcg3wCfWS#46157803。基本上，你需要构建一个自定义前景地图并将其合并到你的主题中。将你的代码片段与上述文章中的代码结合起来，你的styles.scss应该像这样：

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

@include mat-core();

$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent:  mat-palette($mat-pink, A200, A100, A400);

$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);

@function my-mat-light-theme-foreground($color) {
    @return (
        base:              $color,
        divider:           $white-12-opacity,
        dividers:          $white-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),
        slider-min:        rgba($color, 0.38)
    );
};

$white-foreground: my-mat-light-theme-foreground(white);
$my-app-theme-custom: map-merge($sg-app-theme, (foreground: $white-foreground));

@include angular-material-theme($my-app-theme-custom);

/* For the non-Angular Material items */
body {
    color: white;
}

- codequiet

---

这个已经过时了，但我正在尝试弄清楚如何更新它。我必须说，这似乎不是一个好的方法，因为它会破坏明暗主题。 - Christian Matthew

Answer 2

有一些实用函数，你只需要传入几个必要的调色板，如 primary、accent 和 warn，它就会为你包含背景和前景颜色。

这些函数也可以在 Angular Material 文件提供的 scss 中找到，如果导入后可以在创建主题配置时使用。

以下是参考，你可以看到它们自动包含了浅色和深色主题的前景和背景。他们做得非常棒。

 @function _mat-create-light-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  );
}


@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  );
}

- JoshuaTree