I want to use my company's brand colors throughout the app.
I have found this issue: AngularJS 2 - Material design - set color palette where I can build an allegedly custom theme, but it's basically just using different parts of pre-built palettes. I don't want to use Material2's predefined colors. I want my unique and special brand colors. Is there a better way (righter?) to create my own theme, than just hack around with _palette.scss
?
Do I need to make a mixin for my brand palette? If so - any guides on how to do it properly? What are the meanings of the different shades of colors (marked with numbers like: 50, 100, 200, A100, A200...)?
Any information about this area will be much appreciated!
After some research I ended up with this conclusion which solved it for me, hope it will help you too.
Found this awesome website where you enter your brand color, and it creates a complete palette with the different shades of that brand color: http://mcg.mbitson.com
I used this tool for both my primary
color (which is my brand color) and the accent
color.
here is a guide how to create such .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);
The numbers on the left side set the "level" of brightness. The default is 500 (which is the true shade of my brand color/accent color). So in this example, my brand color is #5282c1
. The rest are other shades of that color (where lower numbers mean brighter shades and higher numbers mean darker shades). The AXXX
are different shades. Not sure (yet) where they are in use. Again, a lower number means brighter and higher numbers means darker.
The contrast
sets the font color over those background colors. It's very hard (or even impossible) to calculate via CSS where the font should be bright (white) or dark (black with 0.87 opacity) so it is easily readable even to color blind people. So this is set manually and hard-coded into the palette definition. You get this also from the palette generator I linked above (although it's being outputted in the old Material1 format, and you'll have to manually convert this to Material2 format like I posted here).
Set the theme to use the brand color palette as the primary
color, and whatever you have for accent as your accent
color.
Some elements can take the theme colors, like <md-toolbar>
, <md-input>
, <md-button>
, <md-select>
and so on. They will use primary
by default so make sure you set the brand color palette as primary. If you want to change the color, use the color
directive (is it an Angular directive?).
For example:
<button mat-raised-button color="accent" type="submit">Login</button>