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); 
}