The complete guide to Angular Material Themes

Theme your Angular Material apps like a PRO, examples included 😉

For what is the web if not to express our ideas?

Check out new live coding video tutorial & video from meetup.

Theming support in an application can be pretty useful. From nice to have feature like letting user to chose from available color schemes to get personalized experience to more mission critical branding capabilities like building multi-tenant SaaS product where every client wants to use their own domain, logo and colors to offer branded services to their end customers.

Lately I have been working on Angular ngRx Material Starter project and surprisingly, one of the best features of new Angular Material component library proved to be its theming capabilities. It enables us to implement beautiful themes with only a little effort on our side!

Angular Material theming capabilities in practice (light, dark and default themes of our example project)

Unfortunately, as of June 2017, the official theming documentation seems to be a bit lackluster and it takes a while to figure out how the whole thing actually works and how to get access to the needed colors defined as a part of the theme.

Anatomy of a theme

Defining a theme in Angular Material is extremely simple, all we need to do is to create a theme file, select three color palettes for the main theme colors — primary, accent and warn — and we are all set!

Feel free to explore all the palettes that are available out of the box.