mat.define-palette设置文本颜色失效：指定$text为600为何文本未变白？

给定代码 #

首先看你提供的调色板定义：

$circle-q-warn-pallete: (
    50: #feedea,
    100: #fbd3ca,
    200: #f9b6a7,
    300: #f79984,
    400: #f58369,
    500: #f36d4f,
    600: #f16548,
    700: #ef5a3f,
    800: #ed5036,
    900: #ea3e26,
    A100: #ffffff,
    A200: #fff4f2,
    A400: #ffc6bf,
    A700: #ffafa6,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #000000,
        400: #ffffff,
        500: #ffffff,
        600: #000000,
        700: #000000,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #000000,
        A400: #ffffff,
        A700: #000000,
    ),
);

调色板初始化代码：

$circle-q-warn: mat.define-palette($circle-q-warn-pallete, $default: 500, $lighter: 100, $darker: 700, $text: 600);

问题原因拆解 #

• 你看错了600色调对应的contrast值
  查看调色板的contrast映射，600对应的是#000000（黑色），并非白色。这是你一开始的认知错误。

• 核心误解：$text参数的作用
  mat.define-palette的$text参数，是用来指定文本色使用的基础调色板色调——也就是说，最终文本色会是该色调本身的颜色值（比如这里600的颜色是#f16548，偏红的橙色），而不是该色调对应的contrast值。

  contrast值的真正作用是：当你把某个色调作为背景色时，用这个contrast值作为文本色，来保证文本和背景的可读性。比如用500色调（#f36d4f）当背景时，对应的contrast是白色，这时候文本用白色才清晰。

正确的做法 #

如果想让文本使用某色调对应的contrast颜色，需要在调用mat-color时显式指定contrast参数，比如：

// 获取600色调对应的对比色（黑色）
.warning-text {
  color: mat-color($circle-q-warn, 600, contrast);
}

如果想让文本用白色，应该选contrast值为白色的色调（比如400、500、800、900、A400），再用上述方式获取对应的contrast值即可。

内容的提问来源于stack exchange，提问作者O.MeeKoh