Angular Material自定义颜色

Question

我想为我的材质主题使用超过3种颜色。 例如，我想在$ theme-success：mat-pallete（$ mat-green）中添加我的材质组件（例如md-checkbox color="success"）中的绿色成功颜色。

@import '~@angular/material/theming'; 
@include mat-core(); 

$theme-primary: mat-palette($mat-blue); 
$theme-accent: mat-palette($mat-yellow, A400, A200, A600); 
$theme-warn: mat-palette($mat-red); 
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn); 

.body-light { 
    @include angular-material-theme($theme); 
} 

这可能吗？

Answer 1

color绑定仅支持主要，重音和警告。

如果着色是简单的（对于复选框，它只是.mat-checkbox-background和.mat-ripple-element），您可以使用调色板自己：

$theme-success: mat-palette($mat-green); 

.mat-checkbox-ripple .mat-ripple-element { 
    background-color: mat-color($theme-success, 0.26); 
} 

你也许还与制作2个主题，其中第二个用途逃脱您的成功颜色为primary

$theme-primary: mat-palette($mat-blue); 
$theme-accent: mat-palette($mat-yellow, A400, A200, A600); 
$theme-warn: mat-palette($mat-red); 
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn); 

$theme-success: mat-palette($mat-green); 
$theme2: mat-light-theme($theme-success, $theme-accent, $theme-warn); 

.body-light { 
    @include angular-material-theme($theme); 
} 

.component-success { 
    @include angular-material-theme($theme2); 
}