如何向自定义材质主题添加次要颜色和成功颜色？

Question

我正在使用 Angular 17，并成功创建了一个带有主色、强调色和警告色的自定义 Material 主题。但是，我想为我的主题添加额外的颜色，例如次要颜色和成功颜色。如何在我的 Angular Material 主题中定义这些额外的调色板？

此外，我还有一个问题，为什么需要定义调色板。例如，如果我想使用#5988ff作为主色，为什么我需要创建一个调色板而不是直接将#5988ff设置为主色？

这是我当前主题的 SCSS 设置：

@use '@angular/material' as mat;

@include mat.core();
$custom-primary: (50: #e5e7e9, 100: #bfc3c8, 200: #959ba3, 300: #6a727e, 400: #4a5463, 500: #2a3647, 600: #253040, 700: #1f2937, 800: #19222f, 900: #0f1620, A100: #629eff, A200: #2f7fff, A400: #0060fb, A700: #0057e1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #ffffff, A400: #ffffff, A700: #ffffff,));
$custom-primary: mat.define-palette($custom-primary, 500);

$custom-secondary: (50: #e5e7e9, 100: #bfc3c8, 200: #959ba3, 300: #6a727e, 400: #4a5463, 500: #2a3647, 600: #253040, 700: #1f2937, 800: #19222f, 900: #0f1620, A100: #629eff, A200: #2f7fff, A400: #0060fb, A700: #0057e1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #ffffff, A400: #ffffff, A700: #ffffff,));
$custom-secondary: mat.define-palette($custom-secondary, 500);

$custom-accent: (50: #e5e7e9, 100: #bfc3c8, 200: #959ba3, 300: #6a727e, 400: #4a5463, 500: #2a3647, 600: #253040, 700: #1f2937, 800: #19222f, 900: #0f1620, A100: #629eff, A200: #2f7fff, A400: #0060fb, A700: #0057e1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #ffffff, A400: #ffffff, A700: #ffffff,));
$custom-accent: mat.define-palette($custom-accent, A200, A100, A400);

$custom-warn: (50: #ffe0e0, 100: #ffb3b3, 200: #ff8080, 300: #ff4d4d, 400: #ff2626, 500: #ff0000, 600: #ff0000, 700: #ff0000, 800: #ff0000, 900: #ff0000, A100: #ffffff, A200: #fff2f2, A400: #ffbfbf, A700: #ffa6a6, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000,));
$custom-warn: mat.define-palette($custom-warn, 400);

$My_Project-theme: mat.define-light-theme((color: (primary: $custom-primary, secondary: $custom-secondary, accent: $custom-accent, warn: $custom-warn,), typography: mat.define-typography-config(), density: 0));

@include mat.all-component-themes($My_Project-theme);

我只能在本地更改主题。它在 Stackblitz 上不起作用。无论如何，这是它的代码：

Stackblitz 演示

Answer 1

您无法向 Angular Material (M2) 主题添加其他颜色，仅支持

primary

、

accent

和

warn

。

调色板是必要的，因为在 Angular Material 组件中，使用了不同色调的颜色。例如，将鼠标悬停在按钮上时。