Create a theme with more than 3 colors using angular material2

Question

When creating a theme for angular material2 , it is indicated that you can set the following colors: primary, accent, warning, foreground and background color.

But the theme creation method 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, the first question: how to define a foreground theme and background color?

Can I also define more colors? which I can use for custom components like

Answer 1

Foreground and background colors are applied in the palette. The background color is 50, 100, 200, etc. And the foreground colors are in 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 the material button <button md-raised-button>Click Me</button> , the background will be #e11e60 and the foreground will be #ffffff .

Common backgrounds and predefined colors can be set via css (styles.css). This is just one line in css, it does not require it to handle angular material. Just do the following:

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