我正在使用具有原色和强调色的棱 Angular Material 主题。我有两个不同的主题,定义为橙色和绿色,最终用户可以动态更改。 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 使用选定的行颜色。所选行的文本颜色当前是硬编码的。显然,这不适用于所有强调色,并且可能看起来完全不可读。因此,这也应该根据选择的主题动态更改。
这里有什么建议?我不能清楚地使用原色或强调色,因为它们看起来可能不是最好的。它可能需要是一些其他变量,这些变量可以根据选择的主题具有值。
最佳答案
使用调色板颜色的“对比色”:
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内部结构可能非常有用。
关于css - 使用主题的 Angular Material 文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49848101/