Question

我目前正在学习如何使用文档（https://github.com/angular/material2/blob/master/guides/theming.md）

创建自己的Angular Material 2主题

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

// 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>

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

Answer 1

在_theming.scss上，您具有席位调色板定义：

// 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，您的主题将使用调色板的较暗值。

Answer 2

因为这是材料设计指南定义颜色的方式。对于角度，我没有足够的经验来正确回答，但对于Android，较暗的颜色用于状态栏。

您可以找到更多信息==＆gt; https://material.io/guidelines/style/color.html#color-color-system

Answer 3

材质调色板由一系列具有不同对比度的颜色组成。他们使用数字系统作为使用颜色的键。 500是默认颜色。

有些材料组件使用默认颜色作为颜色。

background-color: mat-color($palette); color: mat-color($palette, default-contrast);

这将分配500种颜色和对比度文本。

创建调色板时，可以通过更改第二个值将默认值从500更改为A200。

$candy-app-accent: mat-palette($mat-pink, A200);

您可以查看我的一个演示，以查看自定义组件和自定义调色板的运行情况 https://angular-material-waterlooblue.stackblitz.io

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

3 个答案: