Change Angular Material theme variable on build

Question

I need to customize my angular 6 application to change a primary color depending on build (I have to change primary color to another one on dev and production). Is there any straightforward solution to change the color on build?

Answer 1

You can use css custom properties to change a css value dynamically.

Setup e. g. in AppModule's constructor:

let primaryColor: string;
if (environment.production) {
  primaryColor = 'green';
} else {
  primaryColor = 'red';
}
document.documentElement.style.setProperty('--primary-color', primaryColor);

And then use the value in your css with:

color: var(--primary-color)

For a SASS solution, have a look at this answer.

Answer 2

Please check this reported issue, it seems that version 6.1 will support file replacements other than just typescript files.

If yes, you should be able to replace your my-own-theme.scss depending on configuration profile. (defined inside angular.json)