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

Posted 2023-03-07

【中文标题】Angular Material 自定义主题 - 为啥 mat-palette 需要 4 个变量？

【英文标题】：Angular Material custom theming - why does mat-palette take 4 variables?Angular Material 自定义主题 - 为什么 mat-palette 需要 4 个变量？

【发布时间】：2017-08-31 05:57:22

【问题描述】：

我目前正在学习如何使用文档 (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>

在这种情况下，工具栏应该是原色。我看不到任何指定我也可以使其更暗或更亮的地方。那么默认的浅色和深色分别是用来做什么的呢？

【参考方案1】：

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

【讨论】：

这是一个很好的答案，其他的应该提供代码并展示如何使用mat-palette。我在文档中看到它引用了它，但没有使用示例。

【参考方案2】：

材质调色板由一系列具有不同对比度的颜色组成。他们使用数字系统作为使用哪种颜色的键。 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

【参考方案3】：

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

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

【参考方案4】：

我正在寻找相同的信息，发现作为mrroboaat的补充：

This post 回答了我们的问题。

在某些地方（可能只是进度条 - 请参阅 #4088），它们被用作组件的较浅和较深的色调。否则，您可以在为自己的组件设置主题时使用这些颜色：

post也是如此

mat-palette 将颜色名称作为其第一个参数，其余可选的第二、第三和第四个参数定义默认值、较浅的值和较深的值。