How do I map a palette from www.materialpalette.com to an Angular 2 theme?

Question

Download link on otherwise excellent www.materialpalette.com doesn\'t support Angular 2. Downloading e.g. sass gives:

$primary-color-dark
$primary-color
$primary         


        

Answer 1

Use http://mcg.mbitson.com/#!/ to generate a palette based on the colors provided by materialpalette so finally you get the file containing your colors e.g /assets/your-palette.scss:

$mat-your-palette: (
    50 : #e8eaf6,
    100 : #c5cbe9,
    200 : #9fa8da,
    300 : #7985cb,
    400 : #5c6bc0,
    500 : #3f51b5,
    600 : #394aae,
    700 : #3140a5,
    800 : #29379d,
    900 : #1b278d,
    A100 : #c6cbff,
    A200 : #939dff,
    A400 : #606eff,
    A700 : #4757ff,
    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 : #ffffff,
        A700 : #ffffff,
    )
);

Then based on the file above you have to create a theme e.g /assets/theme.scss:

@import '~@angular/material/_theming.scss';
@import './your-palette.scss';
@include mat-core();
$primary: mat-palette($mat-your-palette, 500);
$accent:  mat-palette($mat-your-palette, A100);
$warn:    mat-palette($mat-your-palette, A200);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

Then import your theme @import '/assets/theme'; in styles.scss and you are done.
Also check the docs for more info on how to theme your app

UPDATE: To figure out the colors for your custom theme could be a bit tricky. Currently to build material2 theme you only need to provide 3 colors $primary, $accent and $warn As per Theming Guide:

• A primary palette: colors most widely used across all screens and components.
• An accent palette: colors used for the floating action button and interactive elements.
• A warn palette: colors used to convey error state.