How to use the Angular Material’s theme colors in your components ($primary, $accent and $warn)

When using Material 2, It can be a little tricky to figure out how to use the $primary, $accent and $warn colors in our components’s Sass files. This is the easiest way I have found:

Don’t forget to include the theme.scss in the .angular-cli.json file:

What you shouldn’t do: My first attempt was to create the color variables in the theme.scss directly. That’s wrong because it would @include mat-core and angular-material-theme every time we import theme.scss from other files (lots a repeated code). As Will Showell adviced me, we should allways create a separate file for this global sass vars.

More info about theming components: https://github.com/angular/material2/blob/master/guides/theming-your-components.md

That’s all, tell me if it was useful for you.
Thanks for reading!

You’ve learned something new, you deserve a gift: