How to set the background-color of a div as primary theme color in Angular 2 Material

Question

I'm using one of the angular 2 material's theme. I'm able to use the theme colors on material components like button, toolbar using color="primary". But I'm not able to figure out how to theme a div. I don't want to hardcode the hash in .css file since if i decide to change the theme it'll require changes at all places. Am i missing something? What's the best way to do this?

Answer 1

Indeed, you cannot use color="primary" on every HTML element.

What I did is a class called color-primary

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

$primary: mat-palette($mat-deep-purple, 600, 500, 900);
$accent: mat-palette($mat-amber, A400, A300, A600);


.color-primary {
  color: mat-color($primary);
}

.color-accent {
  color: mat-color($accent);
}

Of course, I've set the color here but you can create another class, for example : background-color-primary.

(here's the link of my sample project : Pizza-Sync).