Create theme with more than 3 colors using angular material2

Question

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

Answer 1

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