I have a page for which I would like to change the color depending on the data passed. In Json file I have mentioned the color which needs to be applied.
for Example list Item 1 data consist of color : red, list Item 2 - Blue,…
when I select one of the list item, I push a new page to the stack and so I pass the data using navParams. Now, all my css is in .scss file and I need some way to pass the color from .ts to .scss file. I have a scss variable to which I would like to override the data.
I tried to do this :
$theme = this.data.theme;
I have defined
$theme : #00ff00 in my .scss file.
Uncaught (in promise): ReferenceError: $theme is not defined ReferenceError: $theme is not defined
I cannot create all the themes beforehand because there could be 1000s of varying colors and so having all the themes defined is not possible. I prefer passing color to the scss file and overriding all the colors present in the page but scss files are already compiled during build.
How can I get the apply color coming from JSON data to few css properties in a given page. I have like blue color for example in a page in several places and I want to change all of which by this new color.