如何使用Angular Material M3主题为基础HTML元素设置颜色？

一、迁移M3后遇到的报错 #

之前基于M2编写的reboot SCSS mixin，在M3环境下调用时出现Undefined function错误：

X [ERROR] Undefined function.
   ╷
47 │   $typography-config: mat.get-typography-config($theme);

原因是M3重构了主题API，原M2的mat.get-typography-config、mat.get-color-config等函数已被废弃。

二、已解决的基础样式问题 #

通过以下方式解决了普通HTML元素（如段落）无排版样式、背景色不匹配主题的问题：

html {
  @include mat.core-theme(theme.$dark-theme);
  @include mat.all-component-themes(theme.$dark-theme);
  @include mat.typography-hierarchy(theme.$dark-theme);
}

三、剩余待解决问题 #

1. 普通文本链接（如段落内的<a>标签）仍显示浏览器默认样式（蓝色下划线），未关联主题颜色
2. 需要实现从M3主题中提取颜色，用于自定义Material元素的样式（如渐变、补充缺失颜色）

解决方案 #

1. 重构Reboot Mixin适配M3 #

使用M3新的主题API替换废弃函数，同时遵循M3的语义化颜色命名规范：

@use '@angular/material' as mat;

@mixin theme($theme) {
  // 获取M3排版配置（M2的body-1对应M3的body-large）
  $typography-config: mat.get-theme-typography($theme);
  // 获取M3颜色系统
  $color-system: mat.get-theme-color-system($theme);

  // 提取各调色板（M3中accent更名为secondary）
  $primary-palette: mat.get-color-palette($color-system, primary);
  $secondary-palette: mat.get-color-palette($color-system, secondary);
  $surface-palette: mat.get-color-palette($color-system, surface);

  body {
    margin: 0;
    font-family: mat.font-family($typography-config, body-large);
    font-size: mat.font-size($typography-config, body-large);
    font-weight: mat.font-weight($typography-config, body-large);
    line-height: mat.line-height($typography-config, body-large);
    color: mat.get-color-from-palette($color-system, on-surface); // 语义化颜色：表面上的文本色
    text-align: left;
    background: linear-gradient(to bottom, 
      mat.get-color-from-palette($surface-palette, 900), 
      mat.get-color-from-palette($surface-palette, 800));
  }

  // 统一链接样式
  a {
    color: mat.get-color-from-palette($color-system, primary);
    background-color: transparent;
    text-decoration: none;

    &:hover {
      color: mat.get-color-from-palette($primary-palette, 300);
      text-decoration: underline;
    }
  }

  // 其他基础样式重置...
}

在主题文件中调用时，确保使用M3的主题生成方式：

@use '@angular/material' as mat;
@use './reboot' as reboot;

// 生成M3主题
$wb-theme: mat.define-theme(
  (
    color: (
      theme-type: dark,
      primary: mat.define-palette(mat.$indigo-palette),
      secondary: mat.define-palette(mat.$pink-palette),
    ),
    typography: mat.define-typography-config(),
  )
);

@include mat.all-component-themes($wb-theme);
@include reboot.theme($wb-theme);

2. 用CSS变量快速统一链接样式 #

如果不需要SCSS逻辑，直接使用M3自动生成的全局CSS变量，更简洁：

// 全局样式文件中
a {
  color: var(--mat-primary-color);
  text-decoration: none;

  &:hover {
    color: var(--mat-primary-light-color);
    text-decoration: underline;
  }
}

M3会自动生成一系列主题变量，常用的包括：

• --mat-primary-color：主色
• --mat-secondary-color：辅助色
• --mat-surface-color：表面色
• --mat-on-primary-color：主色上的文本色

3. 自定义Material元素样式的通用方法 #

对于每个需要自定义的Material元素，创建单独的SCSS文件，通过M3 API提取主题颜色：

@use '@angular/material' as mat;

// 自定义按钮样式的mixin
@mixin custom-button-theme($theme) {
  $color-system: mat.get-theme-color-system($theme);
  $primary-palette: mat.get-color-palette($color-system, primary);

  .custom-button {
    background-color: mat.get-color-from-palette($primary-palette, 600);
    color: mat.get-color-from-palette($color-system, on-primary);

    &:hover {
      background-color: mat.get-color-from-palette($primary-palette, 700);
    }
  }
}

在主题文件中调用该mixin：

@use './custom-button' as custom-button;

@include custom-button.custom-button-theme($wb-theme);

也可以直接用CSS变量编写，无需SCSS mixin：

.custom-button {
  background-color: var(--mat-primary-dark-color);
  color: var(--mat-on-primary-color);
}

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