如何使用Angular Material 15自定义主题修改文本默认颜色

核心问题：配置项名称错误 #

在Angular Material的浅色主题配置中，控制默认正文文本颜色的属性是body-text，而非你当前使用的text。你设置的text属性并非框架用于主文本的字段，所以修改后不会生效。

修正后的主题配置代码 #

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$ng-frontend-theme: mat.define-light-theme((
  color: (
    primary: $ng-frontend-primary,
    accent: $ng-frontend-accent,
    warn: $ng-frontend-warn,
  ),
  typography: typography.$my-app-typography,
  foreground: (
    base: black,
    divider: rgba(0, 0, 0, 0.12),
    dividers: rgba(0, 0, 0, 0.12),
    disabled: rgba(0, 0, 0, 0.38),
    disabled-button: rgba(0, 0, 0, 0.26),
    disabled-text: rgba(0, 0, 0, 0.38),
    elevation: black,
    hint-text: rgba(0, 0, 0, 0.38),
    secondary-text: rgba(0, 0, 0, 0.54),
    icon: rgba(0, 0, 0, 0.54),
    icons: rgba(0, 0, 0, 0.54),
    body-text: rgba(0, 0, 0, 0.1), // 替换原text为body-text
    slider-min: rgba(0, 0, 0, 0.87),
    slider-off: rgba(0, 0, 0, 0.26),
    slider-off-active: rgba(0, 0, 0, 0.38)
  )
));

额外验证步骤 #

• 确保你的主题样式文件已经正确导入到Angular项目的全局样式文件（如styles.scss）中，并且没有被其他样式覆盖
• 若使用组件级样式，检查是否存在更高优先级的本地样式覆盖了主题文本颜色

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