angular - 你可以在 Angulars 主题中使用 mat-color 吗？

Question

我在我的 Angular 9 应用程序中使用 Angular 主题，我有一个实例，我想使用垫子颜色更浅和更深(分别用于颜色和背景颜色)，我之前已经使用自定义来使用它主题，但绝不使用 Angular 主题。

我已添加

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

到我的CSS，其中$color-error是我创建的变量。类里面没有看到颜色。

有什么办法可以使用较浅或较深的哑光颜色吗？

谢谢

Answer 1

这里是an example I created on stackblitz关于如何创建带 Angular 主题并根据调色板颜色定义较亮和较暗的颜色

这是重要的代码:

主题.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);

在此文件中，我创建了一个自定义主题并定义了一个浅色主题。

变量.scss:

@import './theme.scss';

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

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

请注意，较浅的颜色和较深的颜色必须基于调色板中的颜色。您不能只选择随机颜色(即使它是 Angular 颜色。对于此处的红色，您必须使用 $custom-warn)。如果您仍然需要使调色板中的颜色变亮或变暗，仍然可以使用 scss lighten 和 darken mixins 来实现这一点:

变亮($myColor, 30%)，与变暗相同。

要使此主题和变量正常工作，您需要在 styles.scss 中导入 theme.scss ，并且无论您想在何处使用自定义变量，您都必须import variables.scss 就这样了。