Question

我在theme.scss中声明了某些主题，如下所示：

$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-warn:    mat-palette($mat-red);
$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-teal, A700);
$green-warn:    mat-palette($mat-red);
$green-theme: mat-light-theme($green-primary, $green-accent);

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

截至目前，我让用户通过将其值设置为橙色主题或绿色主题来切换到主题

this.overlayContainer.getContainerElement().classList.add(theme);

这很有效，但限制因为我必须定义10个主题以支持10种变体。我想要的是相当少的上述罐头主题，但也有能力让最终用户通过选择主要和强调颜色来创建自己的主题。怎么办呢？

角度材料从外部源读取颜色

0 个答案: