How to use custom theme palettes in Angular?

Question

I want to use the colors of my company throughout the application.

I found this problem: AngularJS 2 - Material design - set a color palette where I can create a supposedly custom theme, but basically it's just using different parts of the pre-built palettes. I do not want to use the predefined colors of Material2. I want to have my own unique and special colors. Is there a better way (Righter?) To create my own theme than just hacking with _palette.scss ?

Do I need to create a mix for my brand? If so, any guides on how to do this correctly? What are the values ​​of different shades of colors (indicated by numbers like: 50, 100, 200, A100, A200 ...)?

Any information on this area would be greatly appreciated!

Answer 1

After some research, I came to the conclusion that decided it for me, I hope it helps you too.

Step 1: Create your own custom color palettes.

I found this wonderful website on which you enter the color of your brand, and it creates a complete palette with various shades of color of this brand: http://mcg.mbitson.com

I used this tool for both the primary color (the color of my brand) and for the color accent .

Step 2. Create palettes in your theme file

Here is a guide to creating such a .scss file: https://github.com/angular/material2/blob/master/guides/theming.md

 @import ' ~@angular /material/theming'; // Be sure that you only ever include 'mat-core' mixin once! // it should not be included for each theme. @include mat-core(); // define a real custom palette (using http://mcg.mbitson.com) $bv-brand: ( 50: #ffffff, 100: #dde6f3, 200: #b4c9e4, 300: #7fa3d1, 400: #6992c9, 500: #5282c1, 600: #4072b4, 700: #38649d, 800: #305687, 900: #284770, A100: #ffffff, A200: #dde6f3, A400: #6992c9, A700: #38649d, contrast: ( 50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: $black-87-opacity, 400: $black-87-opacity, 500: white, 600: white, 700: white, 800: white, 900: white, A100: $black-87-opacity, A200: $black-87-opacity, A400: $black-87-opacity, A700: white, ) ); $bv-orange: ( 50: #ffffff, 100: #fff7f4, 200: #fecdbd, 300: #fc9977, 400: #fc8259, 500: #fb6c3b, 600: #fa551d, 700: #f44205, 800: #d63a04, 900: #b83204, A100: #ffffff, A200: #fff7f4, A400: #fc8259, A700: #f44205, contrast: ( 50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: $black-87-opacity, 400: $black-87-opacity, 500: white, 600: white, 700: white, 800: white, 900: white, A100: $black-87-opacity, A200: $black-87-opacity, A400: $black-87-opacity, A700: white, ) ); // mandatory stuff for theming $bv-palette-primary: mat-palette($bv-brand); $bv-palette-accent: mat-palette($bv-orange); // include the custom theme components into a theme object $bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent); // include the custom theme object into the angular material theme @include angular-material-theme($bv-theme); 

Some explanation on the code above

The numbers on the left set the "level" of brightness. The default value is 500 (this is the true shade of my signature / accent color). So in this example, the color of my brand is #5282c1 . The rest are other shades of this color (where lower numbers mean brighter shades, and higher numbers mean darker shades). AXXX different shades. Not sure (yet) where they are used. Again, the smaller the number, the brighter, and the higher, the darker.

contrast sets the font color over these background colors. Using CSS is very difficult (or even impossible) to calculate where the font should be bright (white) or dark (black with an opacity of 0.87) so that it can be easily read even by color blind. So this is manually set and hardcoded in the palette definition. You also get this from the palette generator that I linked above (although it is displayed in the old Material1 format, and you will have to manually convert it to Material2 format, as I posted here).

Set the theme to use a proprietary color palette as the primary color, and all that you have for accent is the color accent .

Step 3: Use a theme throughout the application where you can

Some elements can take theme colors, such as <md-toolbar> , <md-input> , <md-button> , <md-select> and so on. They will use primary by default, so make sure you select the brand color palette as the primary one. If you want to change the color, use the color directive (is it an angular directive?).

For instance:

<button mat-raised-button color="accent" type="submit">Login</button>