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)为绿色调色板中的默认颜色获取正确的对比色。

Answer 2

我能够通过检查MatToolbar的主题来弄明白。

您可以使用以下方法获取调色板的对比色值：

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

请参见修订后的StackBlitz Demo

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

2 个答案: