Как получить матовый основной цвет в angular Material-18

Для этого вы можете использовать mat.get-theme-color.

Полная подробная документация по get-theme-color

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

Мы также должны знать диапазоны чисел для оттенков, которые объяснены на примерах ниже.

При работе с палитрой M3 вы можете обратиться к этой ссылке на документ. Здесь обратите внимание, что палитра находится в диапазоне 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 ($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,
  )
);

СССС:

@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