Erstellen Sie ein Thema mit mehr als 3 Farben mit angular material2

Question

Wenn Sie eine theme for angular material2 erstellen, wird angegeben, dass Sie die folgenden Farben festlegen können: ein primärer, Akzent, warn Vordergrund und Hintergrundfarbe.

Aber die Art und Weise Sie ein Thema erstellen unterstützt nur 3 Farben/Paletten:

$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 
@include angular-material-theme($candy-app-theme) 

Also meine erste Frage ist, wie kann ich für ein Thema definieren die foreground und background Farbe?

Ist es auch möglich, mehr Farben zu definieren? die ich für meine custom components zum Beispiel

Answer 1

verwenden kann Die Vordergrund und background Farben werden in der Palette angewendet. Die Hintergrundfarben sind 50, 100, 200 usw. und die Farben foreground stehen unter Kontrast. Prüfen Sie dies:

$md-my-fancy-pink: (
    50 : #fbe4ec, 
    100 : #f6bccf, 
    200 : #f08fb0, 
    300 : #ea6290, 
    400 : #e64078, 
    500 : #e11e60, 
    600 : #dd1a58, 
    700 : #d9164e, 
    800 : #d51244, 
    900 : #cd0a33, 
    A100 : #fff7f9, 
    A200 : #ffc4ce, 
    A400 : #ff91a4, 
    A700 : #ff788f, 
    contrast: (
     50 : #000000, 
     100 : #000000, 
     200 : #000000, 
     300 : #000000, 
     400 : #ffffff, 
     500 : #ffffff, 
     600 : #ffffff, 
     700 : #ffffff, 
     800 : #ffffff, 
     900 : #ffffff, 
     A100 : #000000, 
     A200 : #000000, 
     A400 : #000000, 
     A700 : #000000, 
    ) 
); 

Zum Beispiel, wenn Sie ein Material-Taste <button md-raised-button>Click Me</button> erstellen, wird der Hintergrund sein #e11e60 und der Vordergrund wird #ffffff sein.

Allgemeine Hintergrund- und Vordergrundfarben können über CSS (styles.css) eingestellt werden. Es ist nur eine einzige Linie in CSS, es ist nicht erforderlich, es mit eckigem Material umgehen zu lassen. Tun Sie das einfach:

html, 
body { 
    background: #f2f2f2; 
    color: #333333; 
}