Angular 19自定义M3主题问题：define-palette未定义及解决方案咨询

1. 为什么define-palette未定义？ #

Angular Material 15及以后版本全面切换到Material Design 3（M3）体系，原M2时代的define-palette函数已被废弃移除，M3不再使用该函数创建调色板，因此会提示未定义。

2. 在哪里可以找到有效的“mat.”函数列表？（Visual Studio 2022无智能提示） #

• 查看本地依赖源码：直接打开项目node_modules/@angular/material/core/theming目录，其中_theme.scss、_color.scss等文件会列出当前版本支持的所有mixins、函数和变量。
• 查阅官方文档的M3主题章节：文档会明确标注当前版本可用的mat.前缀工具，包括主题相关的mixins和调色板函数。
• 解决VS2022智能提示问题：确保SCSS文件顶部已添加@use '@angular/material' as mat;，尝试重新加载项目触发IntelliSense索引，或手动查看包内的.d.ts类型定义文件。

3. 如何用现有颜色创建有效的M3调色板？ #

M3调色板采用语义化色调命名（而非M2的50-900亮度等级），需包含primary、on-primary、primary-container、on-primary-container等核心语义色，具体实现有两种方式：

方式一：手动构建符合M3结构的调色板 #

@use '@angular/material' as mat;

// 手动定义M3格式的主调色板，需包含必要语义色调
$primary-palette: (
  primary: #3f51b5,
  on-primary: #ffffff,
  primary-container: #e8eaf6,
  on-primary-container: #1a237e,
  inverse-primary: #c5cae9,
  // 可根据需求补充其他M3标准色调
);

$tertiary-palette: mat.$red-palette;

html {
  @include mat.theme((
    color: (
      primary: $primary-palette,
      tertiary: $tertiary-palette,
      theme-type: light,
    ),
    typography: Roboto,
    density: 0
  ));
}

方式二：基于主色自动生成完整M3调色板 #

使用Angular Material提供的mat.core-palette函数（当前版本支持），传入主色即可生成符合M3规范的完整调色板：

@use '@angular/material' as mat;

// 基于指定主色生成完整M3调色板
$primary-palette: mat.core-palette(#3f51b5);

$tertiary-palette: mat.$red-palette;

html {
  @include mat.theme((
    color: (
      primary: $primary-palette,
      tertiary: $tertiary-palette,
      theme-type: light,
    ),
    typography: Roboto,
    density: 0
  ));
}

注意：必须确保调色板包含M3主题要求的核心语义色调，否则会触发“无效M3调色板”的错误。

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