角材カスタムカラー

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バインディングは、プライマリ、アクセント、および警告のみをサポートします。

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

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

あなたはおそらくも2つのテーマ、二番目の用途を作ると離れて得ることができる：着色が単純な場合

、あなたはパレットを自分で使用することができます（チェックボックスのために、それだけで.mat-checkbox-backgroundと.mat-ripple-elementです）あなたの成功色は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); 
}