When you create a theme for angular material2 it is stated that you can set the following colors: a primary, accent, warn foreground and background color.
But the way you create a theme only supports 3 colors/palettes:
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme)
So my first question is how can I define for a theme the foreground and background color?
Is it also possible to define more colors ? which I can use for my custom components for example
The foreground and background colors are applied in the palette. The background colors are 50, 100, 200 etc. and the foreground colors are under contrast. Check this:
$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,
)
);
For example, when you create a material-button <button md-raised-button>Click Me</button>, the background will be #e11e60 and the foreground will be #ffffff.
General background and foregorund colors can be set via css (styles.css). It's just a single line in css, it's not required to let it handle angular material. Just do this:
html,
body {
background: #f2f2f2;
color: #333333;
}