CODEWITHSUNDEEP
javascriptangularsassangular6angular-material-6
Jaume
Jaume

Reputation: 763

Change Angular Material theme variable on build

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?

Upvotes: 2

Views: 1613

Answers (2)

Thierry Falvo
Thierry Falvo

Reputation: 6290

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)

Upvotes: 2

Kim Kern
Kim Kern

Reputation: 60357

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.

Upvotes: 3

Related Questions