angular-material2 - 根据当前主题获取调色板对比色相

Question

我的 material-theme.scss 中有以下调色板，具有各种色调值，应用于多个主题。文件:

$green: mat-palette($mat-green, A400);
$blue: mat-palette($mat-light-blue, A400);
$red: mat-palette($mat-red);
$red-warn: mat-palette($mat-red, A100);

在我的 material-styles.scss文件中，我有一个用于根据当前主题定义样式的 mixin:

@mixin style-theme($theme) {
  $p: map-get($theme, primary);
  $a: map-get($theme, accent);
  $w: map-get($theme, warn);
  $primary: mat-color($p);
  $accent: mat-color($a);
  $warn: mat-color($w);
  $primary-contrast: mat-contrast($p, 500);
  $accent-contrast: mat-contrast($a, 500);
  $warn-contrast: mat-contrast($w, 500);

  // Apply styling based on values above
}

主题创建如下:

.light-green {
    $default-theme: mat-light-theme($green, $blue);
    @include style-theme($default-theme);
    @include angular-material-theme($default-theme);
}

我是否可以获得当前应用调色板的对比度？就像现在一样，我只能硬编码 $hue mat-contrast 的值功能。

StackBlitz Demo

Answer 1

当您使用 mat-palette() 时，有六个“特殊”键会自动添加到调色板中。 :

default
lighter
darker
default-contrast
lighter-contrast
darker-contrast

每个基本调色板都包含映射到键 50、100、... 900、A100、A200、A400、A700 的所有颜色。它还包含一个映射到“对比”键的子调色板，其中一组对比色映射到相同的键。分配给特殊键的颜色对应于传递给 mat-palette() 的色调值。 ，默认值分别为 500、100 和 700，分别表示默认值、浅色和深色。 '*-contrast' 映射颜色是使用相同的色调值键从对比度子调色板中提取的。

当您调用 mat-color()没有色调键，它使用 default作为关键。但是您可以使用任何特殊键，这样您就无需知道哪些色调值实际映射到特殊键。

例如，您可以调用 mat-color($green, default-contrast)为您的绿色调色板中的默认颜色获得正确的对比色。