157

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!

isherwood
  • 58,414
  • 16
  • 114
  • 157
Narxx
  • 7,929
  • 5
  • 26
  • 34

3 Answers3

336

After some research I ended up with this conclusion which solved it for me, hope it will help you too.

Step1: Create your own palettes from branding colors.

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.

Step2: Create palettes in your custom theme file

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);

Some explanation on the code above

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.

Step3: Use the theme throughout the app wherever you can

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>

Community
  • 1
  • 1
Narxx
  • 7,929
  • 5
  • 26
  • 34
  • In my case I had used a third-party theme generator, and it omitted the hash symbols on the hex color codes. It also wrapped every key and value with single quotes, but I'm not sure that was a problem. Adding the hashes fixed my compile problem. – isherwood Jun 30 '17 at 14:22
  • @isherwood My answer is old. It's possible that Material2 has slightly change since then. I haven't updated my project yet so I am not sure if that's the issue... – Narxx Jul 02 '17 at 09:31
  • It's still relevant, though the `all-theme` import syntax is out of date. – isherwood Jul 02 '17 at 12:59
  • 1
    Yes, I just tried this and it worked. The only thing that has changed is the imports part. You don't need variables and you only import/include material theming files like this: `@import '~@angular/material/theming'; @include mat-core();` – flackjap Sep 27 '17 at 11:39
  • Oh, yes, and material mixins are also using mat prefix, not md. So it's not md-palette, but mat-palette, and so on. – flackjap Sep 27 '17 at 11:49
  • Yeah, they keep changing the syntax every now and then :) Thanks for the update. You can suggest a correction to the answer to make it updated if you wish (I haven't been maintaining my Angular2 project for quite some time now, and we're switching to Vue.js so I probably won't update my code ever again...) – Narxx Oct 01 '17 at 07:23
  • 3
    Look at this article, it is very good at explaining how it all works https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html – Martin Andersen Oct 05 '18 at 16:51
  • This is awesome. I know I'm late to the party, but I'm new to theming and I'm a little confused on setting up the palette. Our company only has eight colors that I need to use. Do I create a palette for each different color, or just a different entry in the same palette? – TrevorGoodchild Dec 18 '18 at 16:02
  • 1
    @TrevorGoodchild to be honest, we've deprecated our Angular project and wrote it from scratch using VueJS so I don't even remember how we ended up defining our theming in Angular :) Just try to add more color variables, and add them all to mat-light-theme function. – Narxx Dec 19 '18 at 17:02
  • 1
    @Narxx According to the following answer, the AXXX values are for floating action buttons and interactive elements with the "A" standing for "Accent". https://graphicdesign.stackexchange.com/a/69470 – Trevor Karjanis Jul 06 '20 at 14:42
  • Super! There is very less example about material theming. – Nguyen Tran Nov 04 '20 at 04:47
17

With Angular Material v12 a material theme looks like this and should be imported by styles.scss

@use '~@angular/material' as mat;
@import './custom-palettes';

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat.define-palette(mat.$gray-palette, 900, 800, 900);
$candy-app-accent: mat.define-palette(mat.$green-palette, 900, 800, 900);
$candy-app-warn: mat.define-palette($wfs-blue-palette, 800, 700, 900);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($candy-app-theme);

./custom-palettes looks like this:

// see http://mcg.mbitson.com

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

$wfs-blue-palette: (
  50: #eaeef3,
  100: #cad6e0,
  200: #a7bacc,
  300: #849eb7,
  400: #698aa7,
  500: #4f7598,
  600: #486d90,
  700: #3f6285,
  800: #36587b,
  900: #26456a,
  A100: #add1ff,
  A200: #7ab5ff,
  A400: #4798ff,
  A700: #2e8aff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

As with top answer, http://mcg.mbitson.com is used to generate the colors.

danday74
  • 52,471
  • 49
  • 232
  • 283
15

Try using below website, this seems easy to customize angular themes. https://materialtheme.arcsine.dev/

Shailesh Tiwari
  • 295
  • 4
  • 4