Create custom color theme on Angular Material

Most of the time when building an Angular Material application, you will need to customize your color palette, so that you adapt the look of your application to your client’s brand. In this article, we are going to do that customization for an Angular app that uses Angular Material.

When you add Angular Material to your app, you have the choice of four pre-built themes: deeppurple-amber, indigo-pink, pink-bluegrey or purple-green.

An Angular Material theme is based on five color palettes, each palette being just a collection of nuances generated from one main color: the primary palette (the main color used across the application), the accent palette (color used for floating action button and interactive elements), the warn palette (used for all error displays), the foreground palette (used for text and icons) and the background palette (used for element backgrounds).

Let’s say we are going to define a custom theme using three colors: the primary color, the accent (or the contrast) color and the warn color. For the first two, we are going to generate custom palettes, for the third, we are going to use the material red predefined palette.

First, we are going to generate a scss file, let’s call it your-theme.scss, in a common zone folder, let’s say app/common/themes.

Into this file, we are going to @import the theming file from Angular Material which contains the mat-core() mixin, containing all the common styles used by material components. (mat-core() should only be included once in your app to not duplicate the common styles).

@import '../node_modules/@angular/material/theming';

@include mat-core();

Next, we need to generate the material palettes for our two custom colors (primary and accent). An excellent site to do this is mcg.mbitson.com. In our example, we are going to use #008a00 as the primary custom color and #ca5d1e as the accent color. On the generator, enter the name you want for your color variable, click on the arrow on the right of the color box on the header and enter the color code in the input field under the color picker. Click choose and you will see the material nuances generated from your custom color. To export the palette, click on the clipboard icon on the header, then choose output format Angular JS 2 (Material 2). Copy the generated code in our your-theme.scss file. Do the same for the accent color. We will end up having the two custom color material palettes:

@import '../node_modules/@angular/material/theming'; @include mat-core();

@include mat-core();

$my-primary: (
    50 : #e0f1e0,
    100 : #b3dcb3,
    200 : #80c580,
    300 : #4dad4d,
    400 : #269c26,
    500 : #008a00,
    600 : #008200,
    700 : #007700,
    800 : #006d00,
    900 : #005a00,
    A100 : #8bff8b,
    A200 : #58ff58,
    A400 : #25ff25,
    A700 : #0cff0c,
    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 : #000000,
        A700 : #000000,
    )
);

$my-accent: (
    50 : #f9ece4,
    100 : #efcebc,
    200 : #e5ae8f,
    300 : #da8e62,
    400 : #d27540,
    500 : #ca5d1e,
    600 : #c5551a,
    700 : #bd4b16,
    800 : #b74112,
    900 : #ab300a,
    A100 : #ffdfd7,
    A200 : #ffb5a4,
    A400 : #ff8c71,
    A700 : #ff7858,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

@import '../node_modules/@angular/material/theming';

@include mat-core();


$my-primary: (
    50 : #e0f1e0,
    100 : #b3dcb3,
    200 : #80c580,
    300 : #4dad4d,
    400 : #269c26,
    500 : #008a00,
    600 : #008200,
    700 : #007700,
    800 : #006d00,
    900 : #005a00,
    A100 : #8bff8b,
    A200 : #58ff58,
    A400 : #25ff25,
    A700 : #0cff0c,
    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 : #000000,
        A700 : #000000,
    )
);

$my-accent: (
    50 : #f9ece4,
    100 : #efcebc,
    200 : #e5ae8f,
    300 : #da8e62,
    400 : #d27540,
    500 : #ca5d1e,
    600 : #c5551a,
    700 : #bd4b16,
    800 : #b74112,
    900 : #ab300a,
    A100 : #ffdfd7,
    A200 : #ffb5a4,
    A400 : #ff8c71,
    A700 : #ff7858,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

//the first two are the custom palettes we declared above
$my-theme-primary: mat-palette($my-primary);
$my-theme-accent: mat-palette($my-accent);
//the third, for the warn color, is the predefined material red palette
$my-theme-warn: mat-palette($mat-red);

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

@include angular-material-theme($my-theme);

The only one thing left to do is to import the generated theme file into the styles.scss file found in the root of your application

@import "./path/to/your-theme.scss"