如何为Angular Material M3主题配置对比度？

在M3中，你仍然可以通过为调色板添加contrast映射来自定义文本对比度，只需匹配M3调色板的色调编号（0-100，以及部分额外色调如4、6等）即可。以下是具体实现方法：

方法1：直接在调色板中添加对比度配置 #

找到你要修改的目标调色板（比如primary或error），直接在其映射中添加contrast键，为每个色调指定对应的文本颜色：

$_palettes: (
  primary: (
    0: #000000,
    10: #001849,
    20: #002b74,
    25: #0f3683,
    30: #20428f,
    35: #2e4f9c,
    40: #3b5ba9,
    50: #5674c4,
    60: #708ee0,
    70: #8ba9fc,
    80: #b2c5ff,
    90: #dae2ff,
    95: #eef0ff,
    98: #faf8ff,
    99: #fefbff,
    100: #ffffff,
    // 添加自定义对比度配置
    contrast: (
      0: #ffffff,
      10: #ffffff,
      20: #ffffff,
      30: #ffffff,
      40: #ffffff,
      50: #000000,
      60: #000000,
      70: #000000,
      80: #000000,
      90: #000000,
      95: #000000,
      98: #000000,
      99: #000000,
      100: #000000
    )
  ),
  // ... 其他调色板保持不变
);

方法2：单独定义对比度映射并合并 #

如果不想直接修改原始调色板，可以单独创建对比度映射，再用map.merge合并到目标调色板中：

// 单独定义primary调色板的对比度规则
$primary-custom-contrast: (
  contrast: (
    0: #ffffff,
    10: #ffffff,
    20: #ffffff,
    30: #ffffff,
    40: #ffffff,
    50: #000000,
    60: #000000,
    70: #000000,
    80: #000000,
    90: #000000,
    95: #000000,
    98: #000000,
    99: #000000,
    100: #000000
  )
);

// 合并对比度配置到primary调色板
$_primary: map.merge(map.get($_palettes, primary), $primary-custom-contrast, $_rest);

注意事项 #

• 确保对比度颜色符合WCAG可读性标准，避免文本与背景色对比度不足；
• 若调色板包含额外特殊色调（如neutral中的4、6、12等），如果这些色调被组件使用，也需要在contrast映射中对应配置；
• 针对light和dark主题，可分别为对应主题的调色板配置差异化对比度规则，解决不同主题下的可读性问题。

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