Ionic 3 - Dynamically change page theme using Json data

@Murlidhar wrote:

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.

Posts: 2

Participants: 2

Read full topic