使用主题的角度材质文本颜色

Question

我使用的角度材料主题与原色和强调色。我有两个不同的主题，定义为橙色和绿色，最终用户可以动态更改。theme.scss如下所示

@import '~@angular/material/theming';

@include mat-core();

@mixin widget-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);

    .fa-icon {
      color: mat-color($primary);
    }

    .fa-table-data-row-selected {
        background-color: mat-color($accent) !important;
        color: #152A23
    }

    .fa-text-link {
        color: #2A5D9F;
    }
  }



$custom-primary: mat-palette($mat-blue-grey,500);
$custom-accent:  mat-palette($mat-light-blue, A200);
$custom-warn:    mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

@include angular-material-theme($custom-theme);
@include widget-theme($custom-theme);

//Orange theme
$ora-primary: mat-palette($mat-orange, 800);
$ora-accent:  mat-palette($mat-deep-purple, A100);
$ora-theme: mat-light-theme($ora-primary, $ora-accent);

.orange-theme {
    @include angular-material-theme($ora-theme);
    @include widget-theme($ora-theme);
}

//green theme
$green-primary: mat-palette($mat-green, 800);
$green-accent:  mat-palette($mat-lime, A700);
$green-theme: mat-light-theme($green-primary, $green-accent);

.green-theme {
    @include angular-material-theme($green-theme);
    @include widget-theme($green-theme);
}

我的整体配色方案使用原色和强调色效果非常好。但是，请注意下面的用例，其中我有一个表，所选行的颜色使用带有css fa- table -data- row -selected的强调色。选定行的文本颜色当前是硬编码的。显然，这并不适用于所有的强调色，并且可能看起来绝对不可读。因此，这也应该根据所选择的主题进行动态更改。

这里的建议是什么？我不能清楚地使用原色或强调色，因为那样看起来可能不是最好的。它可能需要一些其他的变量，根据选择的主题可以有一个值。

Answer 1

使用调色板颜色的“对比度”颜色：

color: mat-color($accent, default);

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

对于数字色调键，可以使用mat-contrast而不是mat-color

color: mat-color($accent, 500);

contrast-color: mat-contrast($accent, 500);

稍微了解一下theming的内部原理是非常有用的。