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

发布时间：2020-12-17 17:09:31 所属栏目：安全来源：网络整理

导读：我目前正在学习如何使用文档创建自己的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

我目前正在学习如何使用文档创建自己的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,您的主题将使用调色板中较暗的值.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!