你能把垫子的颜色和Angulars的主题搭配起来吗？

我在Angular 9应用程序中使用了一个角度主题，我有一个实例，我想使用更亮和更暗的垫子颜色（分别用于颜色和背景颜色），我以前使用过自定义主题，但从未使用角度主题

我补充说

background-color: mat-color($color-error, lighter);
color: mat-color($color-error, darker);

到我的css，其中$color error是我创建的变量。这些颜色不适合全班

我可以用浅色或深色来搭配垫子颜色吗

谢谢

这里介绍如何创建具有角度的主题，并根据调色板颜色定义较浅和较深的颜色

以下是重要的代码：

theme.scss：

@import '~@angular/material/theming';

@include mat-core();

$custom-primary: mat-palette($mat-teal);
$custom-accent:  mat-palette($mat-pink, A200, A100, A400);
$custom-warn:    mat-palette($mat-red);
$custom-theme:   mat-light-theme($custom-primary, $custom-accent, $custom-warn);

@include angular-material-theme($custom-theme);

在这个文件中，我创建了一个自定义主题并定义了一个灯光主题

variables.scss：

@import './theme.scss';

$primary: mat-color($custom-primary);
$primary-lighter: mat-color($custom-primary, lighter);
$primary-darker: mat-color($custom-primary, darker);

在这里，我根据上面主题中定义的原色创建了3个包含原色、浅色和深色的变量

请注意，您的浅色和深色必须基于调色板中的颜色。您不能只选择一种随机颜色（即使它是角度颜色。对于此处的红色，您必须使用

$custom warn

）。如果您仍然需要将调色板中的颜色调亮或调暗，则仍有SCS

调亮

和

调暗

混合功能可用于：

变亮（$myColor，30%）

，与

变暗相同

要使此主题和变量起作用，您需要在
style.scss
中导入
主题.scss
，并且无论您想在哪里使用自定义变量，都必须导入
变量.scss
，仅此而已