Utilizing Angular2 and Angular Material for theming, my theme scss file contains:
$primary: mat-palette($mat-teal-custom, 500, 400, 900);
$accent: mat-palette($mat-grey4, 500, 200, 600);
There is also an alternate theme later on in the file. Within one of my components, specifically a bar chart component, I am setting the colors of the bars. While I have various logic to handle color settings, I wish to establish a default color based on the current theme that can be reverted to if desired by the user. To achieve this, I need to determine what the color was initially. Unfortunately, I am currently unsure of how to accomplish this.
As a workaround, I included the following snippet in my bar-chart.component.scss:
.trythis {
color: mat-color($primary);
}
Additionally, I added an empty div in my HTML:
<div class="trythis"></div>
Subsequently, in my .ts file, I implemented the following code:
var elems = document.getElementsByClassName("trythis");
var style = window.getComputedStyle(elems[0],null).getPropertyValue("color");
Nevertheless, this method is not aesthetically pleasing. What would be the appropriate TypeScript/Angular approach to retrieving the color?