Generate theme on demand angular 8

Question

I have requirement to take color palette from config file which contains colors based on domain.

Config file is json file placed at root of the project.

In angular material 1 there is a way to generate theme on demand by lazy-generate-theme

Is there any way to do similar in angular material with angular 8?

Answer 1

To use multiple themes check this guide and to generate color palette we often use this Material Design Palette Generator, having those you can configure color theme like this, for example:

...material custom theme implementation from guide...  

...

.red-theme {  
  @include angular-material-theme($red-theme);
  @include custom-components-theme($red-theme);
  ....
}  

Now you can use .red-theme class on body to change colors. The best way I found is to prefetch some string like color-palette: "red-theme" from your backend API in APP_INITIALIZER hook (how it works ref) and use it via service:

theme.service.ts   

setColorPalette(colorPalette) {
   const body = document.querySelector('body');
   body.classList.add(colorPalette);
}