Who doesn’t like material design? I love material design. Some people say material design doesn’t let us design creatively. Yeah, it’s not completely false but you know creative design is not always UX friendly. With material design especially with Angular Material you can build UI that follows UX principles pretty well even you are not an UX specialist.

In this blog post I’ll try to explain how to create custom theme for Angular Material.
Material design has few pre built themes you can use. Available themes are

  • deeppurple-amber,
  • indigo-pink,
  • pink-bluegrey and
  • purple-green.

We will be creating two themes for learning, “indigo” and “dark-pink”.
Material design has naming convention for its colors.

  • Primary
  • Accent
  • Warn

First we have to define color palettes for each of these. At least for Primary and Accent. Warn is optional.

What is color palette?

For Angular Material color palette is defined by a mixin called “mat-palette” and argument of this mixin is key value pair of Sass map

Don’t worry about Sass if you not familiar with it. It’s too simple, just follow the instruction.

The keys(50 – A700) are holding the values of colors(Hex Color Codes) and colors inside “contrast” will be used for background or foreground color. That means if 50 is used as background color of a button then 50 inside “contrast” will be used as text color of that button or vice versa.

Let’s create Sass maps for Primary and Accent. We will use an online tool for creating palettes.
First, choose your primary color from here.

Now go to Material Design Palette Generator, give a palette name(primary) and the color you’ve chosen. I’ve chosen indigo(#3F51B5) for primary color.

Then click Down arrow(export) button at the topbar. A popup will appear. Copy the scss code for “Angular 2/Material”. Create a file “assets/styles/themes/indigo.scss” in “src” directory and paste the copied code in that file.

Now generate code for the accent color in the same way. Paste that in indigo.scss
I’ve chosen “Amber(#FFC107)”.

Now define the palettes and the theme using material predefined mixins.

We will generate our css code prefixed with “indigo” class. So we have nested “angular-material-theme” mixin inside “indigo” class.

You can also define your theme specific css rules you need for your project inside “indigo” class.

You are done! Now we will create another theme. It will be a dark theme.

I’ve chosen “Pink(E91E63)” for Primary and “Blue Grey(607d8b)” for Accent.

Create a file “dark-pink.scss” beside “indigo.scss”.

Copy and paste everything from  “indigo.scss” to “dark-pink.scss”.

Then generate Sass code here Material Design Palette Generator like we did before and replace existing “$md-primary” and “$md-accent” in “dark-pink.scss” with your generated code.

Now we have to use “mat-dark-theme” instead of “mat-light-theme” mixin to define dark theme. And change the class name to “dark-pink”.

Now Include “indigo.scss” and “dark-pink.scss” files in .angular-cli.json file.

Now you will be able to change your application theme by changing class name of your root element or body.

Demo project GitHub repo: angular-material-theming-tutorial

Live Demo