Customization of an Angular Material 2 Theme: Typography & Components

The more I play with things I’ll update this article. See Updates section at the bottom.

I’ll write my adventures of applying design with some popular layout frameworks and Angular in another post (…probably, I’m a lazy blogger), but when I got excited and shared my achievement of applying a design with Angular Material 2 on Twitter, @kgstewart asked me how, so here goes this post.

While I appreciate hard work done by all men and women working in Angular team, and those are helping outside, sometimes I can relate myself with people expressing their frustration using Angular. Angular makes many things easy yet it comes with a price: we need to let go old practices.

Applying design is a major theme in this story and merits a post on its own, I’ll cut short here. Material 2 is Angular team’s implementation of Material Design components (as stated in README), therefore as the name implies it will be limited to Material Design Guidelines. You shall not expect a library that lets you implement all sorts of designs, there is no such thing. That said, other layout/component libraries like Twitter Bootstrap, and their Angular implementations did good job so far and developers have some expectations because of that, plus Material 2 project is part of a big family like Google and that tends to increase expectations.

For developers best advice I can give is to learn not just one component/layout library but several if design implementation is part of your daily tasks list, one size doesn’t fit all.

I wanted to share here what I’ve done with it in hope to account few questions I was asking few weeks back so that you don’t have to search and lose precious time.

How I’ve Figured It Out

Material 2's got its latest update recently (beta.10) with lots of new features & update in docs. Still, docs can have some more examples in step-by-step manner I think, in order to write theme.scss gist I’m about to share, I had to dig source code and repo’s issues section.

NPM shared project is the end-product of Material 2 Github project, so if you’ve been wondering in repo’s source and can’t call component mixins you see there in your theme file, because they are not ones you are supposed to use. If Material team let you change everything, than you’d be probably be breaking Material Design Guidelines and that’s not intended goal.

Mixins available to you can be seen (after npm install ) in node_modules/@angular/material/_theming.scss

Example

Two things I wanted to do were:

1. Custom typography for certain sections/components
2. Custom colors

I also assume you’ve read the guides here: Angular Material Guides

Dissecting This Example

We have two fonts imports, I want to have a different font in my toolbar than one used in general body text & headers…etc.

If you want to implement material typography to your app in general, you need to add class=”mat-typography” somewhere on top of your page hierarchy, otherwise browser’s font-pick (or if you have a font definition for body ) will be applied, Material 2 does not apply typography classes unless you use mat-typography class in your html. Another option is to use it only in parts of your page/s then apply that class only there and not on top of your hierarchy.

In line 7 of above shared gist, I make a definition that holds typography config (just font-family for this example) and then use it when I call in line 17 the mat-core() function so that mat-typography class will apply this font when added somewhere in my template/s (Open-Sans)

I also create a secondary color-theme grey-alternate-theme for top tool bar, because life is boring with only one color set. This time I also want to change font face of toolbar, and only font face of toolbar, nothing else. In line 37 I call mixin mat-toolbar-typography with my second custom font config.

Here we go, we have a tool bar with different font set than rest of our app, different color theme than rest of our app and even if you want to change a particular component’s color, you can do something like this, not sure if it’s recommended though (!important ), again I’m changing toolbar’s color and it’s stupid, but it’s the only element in this example.

Sum Up

There are things you can do with Material 2 and things you can’t.

I’ve showed here how I’ve used mat-toolbar-typography() to change toolbar looks, there are other mixins for other components you can use.

If you can’t find something in docs, first search issues section if anyone else posted the same. If nothing comes up, you can do what I did and open node_modules/@angular/material/_theming.scss to see available mixins. (Be careful not to change anything in that file, danger zone)

Last advice I can share is: Material 2 uses flexbox layout, therefore Flex-Layout package is good complement. If you don’t have previous familiarity to flexbox layout, it might take few feeks to grasp what it is and how to use it though.

Updates

07.09.2017

theme.scss file gets some changes.

1. For .grey-alternate-theme theme variation, no need to call angular-material-theme() mixin, as explained in the docs, that one calls all component mixins, which is not needed if we are only changing few component styles in our custom theme, instead to get core stuff we call @include mat-core-theme($grey-alternate-theme);
2. Also added default color (light-grey) since I’ve changed secondary theme to be dark one. Material only adds foreground/background colors for its components, for anything stays outside you need define what you want. Since I’m now generating a dark theme, a light text color is appropriate instead of browser’s default black. (if needed, you may add a dark background color to parts staying outside of Material components)
3. I’ve added a weight for body-2 level(mat-body-2 class when used)

Default $config has these values:

If you don’t define these sizes in your custom typography config, above default values (or previously defined values) will take precedence, which may not be what you are looking for.