能否通过Angular Material公共函数而非CSS覆写设置主题文本颜色？

问题描述 #

define-palette函数接收名为text的参数，用于设置调色板的text属性。但调用mat.get-theme-color($AngularMaterialTest-theme, foreground, text)时，返回结果为rgba(0, 0, 0, 0.87)。

代码示例 #

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$AngularMaterialTest-primary: mat.define-palette(mat.$indigo-palette, A200, A100, A400, A700); //A700 = #303f9f
$AngularMaterialTest-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400, A700);

// The warn palette is optional (defaults to red).
$AngularMaterialTest-warn: mat.define-palette(mat.$red-palette, A200, A100, A400, A700);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$AngularMaterialTest-theme: mat.define-light-theme((
  color: (
    primary: $AngularMaterialTest-primary,
    accent: $AngularMaterialTest-accent,
    warn: $AngularMaterialTest-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($AngularMaterialTest-theme);

@debug($AngularMaterialTest-primary); // Has text: #304ffe
@debug(mat.get-theme-color($AngularMaterialTest-theme, foreground, text)); // rgba(0, 0, 0, 0.87)

解答 #

可以做到，但你混淆了两类text配置的作用：

• 通过define-palette设置的text属性，是给组件特定交互状态使用的（比如主色调按钮上的文本颜色），并非全局主题的前景文本颜色。
• mat.get-theme-color($theme, foreground, text)获取的是主题前景色配置里的文本颜色，默认情况下mat.define-light-theme会生成一套标准的前景色值（也就是你看到的rgba(0,0,0,0.87)）。

要通过Material公共函数自定义全局文本颜色，只需手动定义前景色配置并传入主题：

1. 创建自定义前景色配置，可基于默认配置修改，也可完全自定义：

// 方法1：基于默认前景色修改text属性
$custom-foreground: mat.define-foreground((
  text: #304ffe // 替换为你需要的文本颜色
));

// 方法2：直接定义完整前景色Map（适合完全自定义所有前景色项）
$custom-foreground: (
  base: #000,
  divider: rgba(0, 0, 0, 0.12),
  disabled: rgba(0, 0, 0, 0.38),
  hint-text: rgba(0, 0, 0, 0.38),
  text: #304ffe, // 自定义全局文本颜色
  icon: rgba(0, 0, 0, 0.54),
  // 其他前景色项可按需保留或修改
);

2. 在定义主题时，将自定义前景色加入color配置：

$AngularMaterialTest-theme: mat.define-light-theme((
  color: (
    primary: $AngularMaterialTest-primary,
    accent: $AngularMaterialTest-accent,
    warn: $AngularMaterialTest-warn,
    foreground: $custom-foreground // 注入自定义前景色
  )
));

3. 此时再调用mat.get-theme-color($AngularMaterialTest-theme, foreground, text)就会返回你设置的#304ffe，同时Angular Material组件会自动应用该颜色作为全局文本默认值，无需覆写CSS。

内容的提问来源于stack exchange，提问作者moefinley