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

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 演示

Answer 1

There are six 'special' keys that are automatically added to a palette when you use mat-palette():

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

Each base palette contains all of the colors mapped to the keys 50, 100, ... 900, A100, A200, A400, A700. It also contains a sub-palette mapped to the key 'contrast' with a set of contrast colors mapped to the same keys. The colors assigned to the special keys correspond to the hue values passed in to mat-palette(), which default to 500, 100, and 700 respectively for default, lighter, and darker. The '*-contrast' mapped colors are pulled from the contrast sub-palette using the same hue value keys.

When you call mat-color() without a hue key it uses default as the key. But you could use any of the special keys so that you don't need to know which hue values are actually mapped to the special keys.

So for example, you could call mat-color($green, default-contrast) to get the proper contrast color for the default color in your green palette.