How to create a custom color theme with angular5 and angular materials

In order to use a custom hex palette for an Angular - Material you will need to define the different shades as well as contrast colors for the palette, even if you only want one color. I'd suggest using at least 3 colors (light, normal, dark) so that it works flawless with Material's built in animations:

// below defines your custom color to build a theme palette from$my-blue: (  50: #7fdddd,  100: #7faedd,  200: #7f7fdd,  300: #7faedd,  400: #7faedd,  500: #7faedd,  600: #7faedd,  700: #7faedd,  800: #7faedd,  900: #7faedd,  A100: #7faedd,  A200: #7faedd,  A400: #7faedd,  A700: #7faedd,  contrast: (    50: white,    100: white,    200: white,    300: white,    400: white,    500: white,    600: white,    700: white,    800: white,    900: white,    A100: white,    A200: white,    A400: white,    A700: white,  ));// below creates a primary palette with three shades of blue$my-primary: mat-palette($my-blue, 100, 50, 200);

as Z. Bagley suggested make your own palette, but I think that you don't need to make all those colors into palette. For example this works fine.

$custom-collection: (    warning :  #FFC116,    success :  #0a630f,    danger:    #c00000,    contrast: (        warning :  #000000,        success :  #FFFFFF,        danger:    #FFFFFF,    ));

Then you make palette as suggested

$my-app-custom: mat-palette($custom-collection, custom);

Then merge it to theme after mat-light-theme row like this

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);$my-app-theme: map_merge($my-app-theme, (custom: $my-app-custom));

After this you have one object where every color is located.

And may I suggest you make general custom object for this like this

$custom: map-get($my-app-theme, custom);

Then you can use it in your component like this

background-color: mat-color($custom, validation-invalid);color: mat-color($custom, validation-invalid-contrast);

And one more suggestion. You may add mat-success to your global style file

.mat-success {  background-color: mat-color($custom, success);  color: mat-color($custom, success-contrast);}

Now you can use color attribute like with primary and accent colors.

<button mat-flat-button color="success" >Success</button>

This works because color directive add mat-*-class to element where * is value of color. So color="foo" generates class="mat-foo" to corresponding element.

For future reference, there are tools out there such as http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 that can create the theme for you based on a starting color.

• Give it a name
• Choose base color
• Click the clipboard icon
• Choose the Framework
• Copy paste into your .scss
• Pass the variable down