Angular Material Custom Color Palette


mksolemn
Angular Material Custom Color Palette

Completed example – stackblitz

Source (github)

What will you learn?

I will show you 2 ways to create Angular material custom color palette. First I’ll use preset Angular material themes, like $mat-indigo, $mat-pink… etc. Then I will customize a color palette using Sass and this insane tool to generate a custom material design color palette. This will allow you to generate an Angular material color palette from your chosen color.

In the end, you will be able to:

  • add Angular material to your project;
  • use any Angular material preset theme;
  • create your own Angular material custom color palette using sass and color palette generator;

When to use?

This is mostly useful when you want to keep a consistent color palette or adapt material design elements to fit your websites color scheme. In most cases changing primary and secondary is enough to give website some distinction.

Adding Angular material, Angular CDK & Animations

There’s a couple of approaches to adding Angular material to Angular 6. Most common approach that will work for any Angular version is using npm.

a. Old Way: In your project main directory run:

$ npm install --save @angular/material @angular/cdk @angular/animations

b. New Way: For Angular 6 and above we can use this command:

$ ng add @angular/material

Importing BrowserAnimationModule and Angular material components

You can find all available Angular material components here. For this demonstration I’m only using MatButtonModule.

// app.module.js

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Using predefined Angular material themes

First of we need to declare theme.scss file in angular-cli.json or angular.json styles depending on your angular version.

// angular-cli.json //angular.json

...

"styles": [
"src/styles.scss",
"src/theme.scss"
]

...

Then in app/src folder create file theme.scss

Few things will be happening in this file:

  • well import theming module;
  • add core styles;
  • define primary, accent and warning color palettes;
// theme.scss

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

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent: mat-palette($mat-pink, 500, 900, A100);
$my-app-warn: mat-palette($mat-deep-orange);

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

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

This is quick way to customize Angular material with predefined theme styles. However using predefined styles is rarely an option especially if branding is important for your project. Next we’ll generate and add custom color palettes.

Creating custom Angular material color palette

First of let’s take a look at the Angular material color palette to understand how it works.

This is how color palettes are defined in Angular material:

Angular Material Custom Color Palette

You can find theming file here: node_modules\@angular\material\_theming.scss

Generating Angular Material Custom Color Palette

You can easily create one of these on your own and use it instead of predefined theme. However the problem is you’d have to add each color shade yourself. Or write some sort of script to generate these colors for you. But ! Thanks to some awesome person – we can use this tool to generate material color palettes.

Simply pick a color and copy generated code to theme.scss.

// theme.scss

...

$my-custom-primary-color: (
50 : #edebfc,
100 : #d3cef8,
200 : #b6aef3,
300 : #988dee,
400 : #8274eb,
500 : #6c5ce7,
600 : #6454e4,
700 : #594ae0,
800 : #4f41dd,
900 : #3d30d7,
A100 : #ffffff,
A200 : #e9e7ff,
A400 : #b9b4ff,
A700 : #a29bff,
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,
)
);

$my-app-primary: mat-palette($my-custom-primary-color);

...

If you’re not familiar with sass, I’m basically assigning palette to variable and then pass it to Angular material palette. And that’s all !

All questions and suggestions are welcome, I will do my best to respond asap.

Show Comments (0)

Comments