Angular Material benutzerdefinierte Farben

Question

Ich hätte gerne Zugriff auf mehr als 3 Farben für mein Material Thema. Zum Beispiel möchte ich in $ theme-success: mat-pallete ($ mat-green) hinzufügen, um eine grüne Erfolgsfarbe in meinen Materialkomponenten wie md-checkbox color="success" zu erhalten.

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

Ist das möglich?

Answer 1

Die color Bindungen unterstützen nur primäre, Akzent und warnen.

Wenn die Färbung einfach (für Kontrollkästchen, es ist nur .mat-checkbox-background und .mat-ripple-element), können Sie die Palette verwenden, um dich:

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

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

Sie könnten wahrscheinlich auch mit der Herstellung 2 Themen weg, wo die zweiten Verwendungen Ihr Erfolg Farbe für 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); 
}