Angular Material自定义主题 – 为什么mat-palette需要4个变量？

2023年1月13日 428次阅读

我目前正在学习如何使用文档创建自己的Angular Material 2主题(
https://github.com/angular/material2/blob/master/guides/theming.md)

似乎主要是在这里指定颜色

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

我不太清楚mat-palette的作用.我理解第一个指定颜色的参数 – 我不明白为什么有一个默认的,更浅和更暗的颜色.

当你有这样的代码时,我想这些颜色会被显示出来

<md-toolbar color="primary">
text
</md-toolbar>

在这种情况下,工具栏应为原色.我看不到任何指示我可以使它变暗或变亮的地方.那么用于什么的默认,更亮和更暗的颜色？

最佳答案 看看_theming.scss你有mat-palette定义：

// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
// of the Material Design hues.
// @param $color-map
// @param $primary
// @param $lighter
@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700)

使用https://material.io/tools/color获取颜色名称和参数值.

在你的theme.scss文件中,你已经定义了你的主题：

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

将mat-light-theme更改为mat-dark-theme,您的主题将使用调色板中较暗的值.

点赞