Angular Material2 - Programmatically setting color

Question

I am looking for a way to change "accent" color in the theme at runtime inside my component. For example in the constructor.

I have been looking all over for this without luck. All the answers i have found is telling me how to pre-define a theme document that will define the colors for "primary", "accent", "warn".

My application fetches the colors (such as "#FFFFFF") via AJAX on load, and needs to apply them to "primary" or "accent" during runtime.

Is this even possible?

Answer 1

What you can do to add css manipulate your container with a viewchild and add internal css.

 @ViewChild ('yourcontainer') container: ElementRef; private yourColorGetted: string = '#FFFFFF'; private yourBackgroundColorGetted: string = '#FFFFFF'; this.container.nativeElement.insertAdjacentHTML ('beforeend', `<style>     .candy-carousel {            background-color: ${this.yourBackgroundColorGetted},            color: ${this.yourColorGetted}     }     </style> `);

 <div id="yourcontainer"> </ div>