如何在Angular Material 3中生成含指定主色（Hue 40）的调色板

问题原因 #

Angular Material 3的主题生成器会将输入颜色映射到Material Design 3色彩系统中最匹配的标准色调，而非直接将输入色设为调色板的Hue 40，这就是生成的调色板里没有指定的#C9007E的原因。

解决方法 #

方法1：手动修改生成的主题文件 #

找到通过ng generate @angular/material:m3-theme命令生成的主题SCSS文件（通常命名为theme.scss），直接修改primary调色板中Hue 40的值为目标颜色：

// 修改后的primary调色板部分
$_palettes: (
  primary: (
    0: #000000,
    10: #3d0023,
    20: #63003c,
    25: #770049,
    30: #8c0056,
    35: #a10064,
    40: #C9007E, // 替换为你指定的颜色
    50: #dd218d,
    60: #ff43a8,
    70: #ff82bb,
    80: #ffb0cf,
    90: #ffd8e5,
    95: #ffecf1,
    98: #fff8f8,
    99: #fffbff,
    100: #ffffff,
  ),
  ...
);

如果需要其他色调更贴合目标主色的明暗逻辑，可以使用Material Design的色彩工具生成完整的调色板后替换所有值，确保色彩系统的一致性。

方法2：自定义创建M3调色板 #

跳过生成器，直接手动定义符合需求的调色板并创建主题：

@use 'sass:map';
@use '@angular/material' as mat;

// 自定义primary调色板，确保Hue 40为目标颜色
$custom-primary-palette: (
  0: #000000,
  10: #37001f,
  20: #5a0035,
  25: #6d0040,
  30: #81004c,
  35: #960058,
  40: #C9007E,
  50: #e0218f,
  60: #ff44a9,
  70: #ff83bc,
  80: #ffb1d0,
  90: #ffd9e6,
  95: #ffedf2,
  98: #fff8f9,
  99: #fffbff,
  100: #ffffff,
);

// 创建主题
$custom-theme: mat.define-theme(
  (
    color: (
      primary: $custom-primary-palette,
      // 可继续配置secondary、tertiary等调色板
    )
  )
);

// 应用主题
@include mat.all-component-themes($custom-theme);

这样就能确保按钮等控件使用的主色（Hue 40）完全是你指定的#C9007E。

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