如何在角材料中获得垫子原色-18

Question

我已将 Angular-16 项目升级到 Angular-18。它工作正常。 Angular材质-18也升级了。

现在我想为一些元素指定原色，语法是这样的：

@use '@angular/material' as mat;
background-color: mat.get-color-from-palette($primary, 300) !important;

但它不起作用。需要一些帮助。我还没有创建任何自定义主题。

谢谢

Answer 1

您可以使用

mat.get-theme-color

来实现此目的。

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

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

---

我们还应该注意色调的数字范围，如下例所示。

处理 M3 Palette 时，您可以参考此文档参考。这里注意调色板是如何在0-100范围内的

$azure-palette: _apply-patches((
  0: #000000,
  10: #001b3f,
  20: #002f65,
  25: #003a7a,
  30: #00458f,
  35: #0050a5,
  40: #005cbb,
  50: #0074e9,
  60: #438fff,
  70: #7cabff,
  80: #abc7ff,
  90: #d7e3ff,
  95: #ecf0ff,
  98: #f9f9ff,
  99: #fdfbff,
  100: #ffffff,

如果您正在使用 M2 Palette ($pink-palette)，您可以参考此文档参考。注意数字的范围是从 50-A700

$pink-palette: (
  50: #fce4ec,
  100: #f8bbd0,
  200: #f48fb1,
  300: #f06292,
  400: #ec407a,
  500: #e91e63,
  600: #d81b60,
  700: #c2185b,
  800: #ad1457,
  900: #880e4f,
  A100: #ff80ab,
  A200: #ff4081,
  A400: #f50057,
  A700: #c51162,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

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 演示