Material 3（Angular 18）中替代mat.get-color-from-palette的颜色提取方法是什么？

Material 3的调色板系统基于Tonal Palettes（色调板），替代了Material 2的数字权重逻辑，以下是两种等效实现方式：

方法1：使用SCSS内置函数 #

Material 3提供了md.get-color-from-palette()函数，用法和Material 2的mat.get-color-from-palette()类似，直接传入色调板和对应的tone值（范围0-1000）即可：

// 导入Material 3核心SCSS
@use '@angular/material' as md;

// 提取默认primary调色板的800 tone颜色
$primary-800: md.get-color-from-palette(md.$palette-primary, 800);

如果是自定义调色板，需先按Material 3规范定义色调板，再提取颜色：

// 自定义primary色调板（基于基础色值）
$custom-primary: md.define-tonal-palette(#6750a4);
// 提取自定义调色板的800 tone颜色
$custom-primary-800: md.get-color-from-palette($custom-primary, 800);

方法2：直接使用CSS变量 #

Material 3会自动注入全局CSS变量，可直接在样式或模板中调用，无需SCSS编译：

• 在SCSS样式中使用：

.target-element {
  background-color: var(--md-sys-color-primary-800);
}

• 在模板内联样式中使用：

<div style="background-color: var(--md-sys-color-primary-800);">示例内容</div>

CSS变量命名规则为--md-sys-color-[调色板名称]-[tone值]，常见调色板包括primary、secondary、tertiary、error等。

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