如何使用有角材质创建自定义调色板？

Question

我是 Angular Material2 的新用户，我尝试为我的应用程序定义自定义主题。 所以我想为我的自定义主题定义一个调色板：

@use "@angular/material" as mat;
@include mat.core();

$m2-custom-palette: (
  50: #e1f5fe,
  100: #b3e5fc,
  200: #81d4fa,
  300: #81d4fa,
  400: #29b6f6,
  500: #03a9f4,
  600: #039be5,
  700: #0288d1,
  800: #0277bd,
  900: #01579b,
  contrast: (
    50: #000,
    100: #000,
    200: #000,
    300: #fff,
    400: #fff,
    500: #fff,
    600: #fff,
    700: #fff,
    800: #fff,
    900: #fff,
  ),
);
$my-primary: mat.m2-define-palette(mat.$m2-light-blue, 500);

定义 $my-primary 变量后出现错误：“未定义变量 mat.$m2-light-blue”。 我很困惑。请帮忙。

Answer 1

发生错误是因为 $m2-light-blue 不存在。相反，您应该定义自定义调色板并直接使用它。这是一个简化的修复：

@use "@angular/material" as mat;

//  Angular Material core here
@include mat.core();

// your custom palette here
$m2-custom-palette: (
  50: #e1f5fe,
  100: #b3e5fc,
  200: #81d4fa,
  300: #81d4fa,
  400: #29b6f6,
  500: #03a9f4,
  600: #039be5,
  700: #0288d1,
  800: #0277bd,
  900: #01579b,
  contrast: (
    50: #000,
    100: #000,
    200: #000,
    300: #fff,
    400: #fff,
    500: #fff,
    600: #fff,
    700: #fff,
    800: #fff,
    900: #fff,
  ),
);

//   primary color 
$my-primary: mat.define-palette($m2-custom-palette, 500);

// put primary +accent +  warn palettes here
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  ),
));

// Include  theme style here
@include mat.all-component-themes($my-theme);

这应该可以解决您的问题。您基本上是在定义自定义颜色，然后正确应用它们。