如何从 Material 3 的调色板中提取颜色

Question

使用材质 2 (Angular 17)，我使用以下方法提取颜色：

mat.get-color-from-palette($primary, 800)

。材料 3（Angular 18）中的等效项是什么？

Answer 1

您可以使用

mat.get-theme-color

来实现此目的。

获取主题颜色的完整详细文档

background-color: mat.get-theme-color($theme, primary, 50) !important;

SCSS：

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
  )
);

body {
  background-color: mat.get-theme-color($theme, primary, 50) !important;
  @include mat.all-component-themes($theme);
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
}

html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

Stackblitz 演示